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译 者 序 


人 们 常 将 前 端 技术 HTML, CSS 和 JavaScript 亲切 地 称 为 “三 剑客 *"， 大 抵 说 的 是 它们 并 肩 
支撑 起 了 数 以 亿 计 的 网 站 ， 英 勇 、 侠 义 之 气概 不 亚 于 桃园 结义 的 刘 关 张 。 但 车 将 网 站 比 作 
一 个 少女 ，HTML 可 视 作 她 的 身躯 ，CSS 必然 是 伊人 的 着 装 打扮 ， 而 JavaScript 则 是 其 言 
谈 举止 。 腮 脂 铅 粉 易 得 ， 化 妆 技 巧 难 学 。CSS 何尝 不 是 这 样 一 门 技术 ， 稍 微 有 点 CSS 知识 
的 前 端 新 人 ， 都 可 以 借助 可 视 化 编辑 工具 ， 随 心 所 欲 地 加 一 串 串 行内 样式 ， 实 现 自 己 想 要 
的 效果 。 如 此 看 来 ，CSS 很 简单 。 但 实际 上 ，CSS 又 很 难 ， 后 台 开 发 人 员 看 到 前 端 高 手写 
的 一 堆 堆 代码 就 头 大 ， 觉 得 CSS 好 难 啊 ! 改动 一 处 样式 ， 结 果 页 面 布 局 大 乱 ， 修 改 起 样式 
来 如 履 薄 冰 ， 这 哪里 是 哪里 呀 ! 样式 明明 加 上 了 ， 可 千 呼 万 唤 就 是 不 生效 ! 向 候 好 一 个 浏 
览 器 ， 别 家 的 又 乱 了 ， 这 还 能 按时 发 布 吗 ?! 

























































































CSS 的 难 ， 部 分 原因 正 是 其 简单 造成 的 。 代 码 写 起 来 简单 、 灵 活 ， 且 有 近乎 万 能 的 行内 样 
式 ， 实 在 不 行 还 有 更 厉害 的 !important 声明 ， 所 以 可 以 尽管 “大 胆 ” 地 写 : 定义 元 长 的 选 
择 器 ， 大 段 粘贴 样式 ，CSS 和 JavaScript 中 混用 选择 器 ， 弃 而 不 用 的 代码 也 不 删 掉 ， 不 同 
用 途 的 样式 混在 一 起 。 虽 然 应 用 样式 的 目的 达到 了 ， 但 是 代码 的 可 读 性 、 性 能 玻 于 考虑 ， 
华丽 的 外 表 下 惨不忍睹 。 























想必 很 多 前 端 朋 友 都 已 经 认识 到 上 述 问题 ， 并 开始 有 意识 地 积累 CSS 重 构 知 识 。 本 书 刚好 
适合 你 。 本 书 是 CSS 重 构 这 个 垂直 领域 的 系统 指南 ， 作 者 Steve Lindstrom 有 近 二 十 年 的 网 
站 开发 经 验 。 该 书 首先 从 软件 架构 的 高 度 和 软件 工程 的 视角 介绍 了 CSS 重 构 的 必要 性 、 重 
构 的 原则 和 重 构 时 间 点 的 选择 ， 接 着 讲解 了 级 联 方法 、 选 择 器 特 指 度 的 计算 方法 以 及 CSS 
码 规范 ， 然 后 又 介绍 了 如 何 测 试 网 站 在 多 种 设备 和 浏览 器 上 的 展示 效果 。 你 将 学 到 如 何 
用 Gemini 测试 框架 、PhantomJS 无 头 浏 览 器 自动 化 截图 ， 比 较 重 构 前 后 视觉 效果 上 的 差 
异 。 最 后 ， 作 者 详细 介绍 了 代码 的 组 织 方式 、 重 构 策略 以 及 重 构 的 评价 标准 。 读 完 本 书 ， 
始 可 与 言 CSS 重 构 已 人 笑 。 从 这 本 薄 书 中 你 收获 到 的 将 是 一 整套 CSS 重 构 理论 加 方法 指南 。 
此 后 ， 你 可 将 自己 已 掌握 和 新 掌握 的 知识 纳入 这 个 体系 ， 以 重 构 的 理念 贯穿 始终 ， 构 建 起 
自己 的 前 端 知识 大 厦 ， 最 终 输出 高 性 能 的 CSS 代码 。 本 书 适 合 编写 CSS 的 前 端 开发 人 员 ， 
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新 手 宜 于 学 习 、 实 践 和 佐证 自己 的 想法 ， 高 手 可 当 是 相互 切磋 。 


我 周围 有 很 多 前 端 工程 师 朋 友 ， 工 作 中 也 会 与 他 们 打交道 。 他 们 或 为 网 站 ， 或 为 Android、 
iOS 应 用 编写 CSS 样式 。 我 知道 有 不 少 前 端 朋 友之 前 从 事 其 他 行业 ， 从 培训 班 毕业 后 直接 
找 的 工作 。 我 在 此 郑重 向 感觉 自己 缺乏 软件 工程 知识 和 实践 的 朋友 推荐 本 书 ， 书 中 提 到 的 
方法 能 将 你 引 疝 大 路 。 互 联网 技术 这 个 行当 相对 不 那么 看 重 各 种 背景 ， 只 要 踏实 、 上 进 、 
肯 钻 研 ， 再 加 上 技术 过 硬 ， 都 能 找到 一 个 好 去 处 。 















































我 跟前 端 还 是 蛮 有 渊源 的 。 十 年 前 ， 我 开始 傻乎乎 地 用 记事 本 写 HTML、CSS， 添加 幼稚 
的 样式 ， 为 实现 的 朴素 效果 激动 不 已 。 读 研 期 间 的 一 次 大 作业 ， 我 曾 选择 前 端 技术 作为 研 
究 方向 。 我 还 曾 把 翻译 HTML 技术 文章 作为 翻译 实践 。 我 麦子 司 韦 韦 曾 从 事前 端 工作 。 我 
见证 了 她 转行 学 习 前 端 到 工作 的 整个 过 程 ， 我 常常 不 由 地 为 她 的 华丽 转身 而 惊叹 ! 她 在 短 
短 几 年 之 内 ， 从 一 家 小 外 贸 公司 的 职员 晓 变 为 “宇宙 中 心 ” 一 家 知名 外 贸 电 商 的 前 端 工 
程 师 。 时 代 造 人 ， 不 能 不 让 人 感慨 。 技 术 发 展 的 脚步 ， 我 们 不 能 不 赛 ， 技 术 发 展 的 速度 之 
快 ， 我 们 不 能 不 奋起 直 追 。 还 记得 她 刚 工作 时 ， 一 个 夏 日 的 周末 ， 我 们 同 去 中 关 村 图 书 大 
厦 读 书 ， 然 后 又 一 起 去 北大 静 园 草坪 游玩 。 云 销 雨 零 ， 我 们 拣 地 热 井 旁 的 大 青石 拂 去 雨水 
而 坐 ， 她 兴奋 地 跟 我 说 ， 她 在 制作 页 面 方面 的 很 多 想法 与 刚 读 到 的 书 中 的 想法 如 出 一 辐 ， 
我 跟着 她 一 起 高 兴 。 一 本 好 书 的 力量 是 无 穷 的 。 我 希望 本 书 所 讲 内 容 也 能 给 广大 前 端 工 程 
师 带 来 知识 、 信 心 和 力量 。 
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刚 开始 学 CSS 那 会 儿 ， 我 发 现 它 的 句法 〈 组 成 一 门 编程 语言 的 规则 和 结构 ) 掌握 起 来 很 简 
单 ， 因 为 代码 的 编写 方式 有 现成 的 规则 可 循 。 然 而 ， 我 发 现 组 织 好 CSS， 使 其 易于 维护 ， 
则 难度 比较 大 。 比 这 更 难 的 是 整理 之 前 写 的 、 结 构 不 清晰 的 CSS。 我 写 这 本 书 的 初衷 就 是 
想 把 自己 在 试 错过 程 中 学 到 的 一 切 分 享 给 更 多 人 。 若 是 我 刚 开始 学 CSS 那 会 儿 ， 市 面 上 有 
这 样 一 本 书 就 好 了 。 


目标 读者 

虽然 我 希望 所 有 CSS 开发 人 员 都 能 从 中 受益 ,但 本 书 主要 是 写 给 那些 勉强 能 够 编写 可 用 的 
用 户 界 面 的 读者 的 ， 他 们 缺乏 经 验 或 视野 不 够 开阔 ， 不 能 从 全 局 理解 自己 编写 的 代码 是 怎么 
组 织 在 一 起 的 。 目 标 读 者 懂得 怎样 编写 CSS 语句 ， 但 也 许 不 理解 某 些 做 法 背后 的 原因 。 他 
们 可 能 也 不 知道 怎么 安排 代码 的 架构 ， 使 其 成 为 易 维护 、 易 扩展 并 且 便于 合作 开发 的 软件 。 


本 书 的 目标 


本 书 旨 在 阐明 CSS 的 一 些 比较 微妙 的 知识 点 ， 便 于 新 手 理解 。 我 还 想 讲 讲 为 什么 编写 和 测 
试 CSS 很 难 ， 以 及 为 什么 说 花 时 间 重 构 CSS 是 值得 的 。 


本 书 主题 如 下 : 


。 什么 是 重 构 ， 它 的 好 处 是 什么 ， 它 与 软件 架构 之 间 什 么 关系 

。 级 联 、 选 择 器 的 优先 级 和 盒子 模型 等 常 被 误解 的 CSS 知识 

。 如 何以 更 明智 的 方式 编写 代码 并 保持 一 致 性 ， 从 而 编写 出 质量 更 高 的 CSS 
。 如 何 用 编码 标准 和 模式 库 维护 高 质量 的 CSS 

。 CSS 的 测试 方法 

。 CSS 的 组 织 方法 
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。 CSS 的 重 构 策略 
。 衡量 重 构 是 否 成 功 的 标准 














你 可 以 将 本 书 中 的 知识 立刻 付 诸 实 践 ， 去 编写 质量 更 高 的 CSS 代码 ， 从 而 提高 代码 库 的 
质量 。 倘 车 团队 协同 工作 ， 代 码 库 也 会 因此 更 容易 维护 。 若 在 实践 过 程 中 用 到 书 中 讲 的 概 
念 ， 我 鼓励 你 再 次 阅读 相关 章节 ， 彻 底 把 它 搞 清 楚 。 


本 书 不 涉及 的 内 容 


本 书 重 点 讲解 的 这 些 概 念 ， 其 技术 性 不 一 定 很 强 。 因 此 ， 有 很 多 主题 不 在 本 书 讲解 范围 之 
内 ， 其 中 包括 以 下 几 个 。 
























































CSS 属 性 

编写 CSS 需要 掌握 CSS 属性 的 相关 知识 ， 但 是 本 书 不 讲 。 也 许 本 书 会 时 不 时 地 建议 你 
该 使 用 什么 属性 ， 但 是 为 了 能 够 系统 地 学 习 这 些 属性 ， 建 议 你 参考 Eric Meyer 的 《CSS 
权威 指责 》、 Christopher Schmitt 的 《CSS Cookbook 中 文 版 》 或 其 他 权威 网 站 ， 比 如 
Mozilla Developer Network (https://developer.mozilla.org) 。 

















HTML 25 #4) HE 
构建 用 户 界面 既 需 要 HTML 又 需要 CSS， 它 们 会 相互 影响 。 我 们 会 讨论 将 CSS 从 
HTML 中 分 离 出 来 的 方法 ， 但 是 不 会 讨论 HTML 编写 方式 及 其 结构 安排 的 利 次 。 








搭建 网 站 ， 前 端 性 能 很 重要 ， 这 个 主题 也 非常 有 趣 。 可 是 由 于 本 书 只 讲 CSS 重 构 ， 因 此 
我 们 只 是 简要 讲 讲 前 端 性 能 。 这 个 话题 涉及 面 很 广 ， 圳 括 了 其 他 多 个 主题 。Steve Souders 
(https://stevesouders.com) 写 了 几 本 性 能 方面 的 书 ， 都 非常 不 错 。Paul Irish (http:/Awww. 
paulirish.com), Nicole Sullivan (http://www.stubbornella.org) 和 Stoyan Stef anov (http:/www. 
phpied.com) 三 人 也 在 这 个 方面 做 出 了 很 多 了 不 起 的 工作 。 此 外 ， 谷 歌 提 供 的 一 些 指南 和 
工具 (https://developers.google.com/speed/pagespeed)， 对 于 提升 前 端 性 能 也 很 有 帮助 。 



























































CSS 框 架 
CSS 框架 变动 比较 频 和 党 ， 在 实现 上 强行 加 入 了 自己 定义 的 规则 ， 因 此 本 书 也 不 讲 。 然 而 ， 
我 希望 你 在 读 完 本 书后 能 够 看 着 任意 一 个 框架 的 源 代码 自己 去 评价 一 下 其 实现 的 好 坏 。 




















3) WE 3B 
小 众 浏 览 器 


Web 浏览 器 数量 惊人 ， 但 我 们 只 讨论 主流 浏览 器 ， 比 如 Microsoft Edge (之 前 的 TE), 
Safari, Chrome 和 Firefox 以 及 它们 的 移动 浏览 器 版 本 ， 因 为 这 些 浏览 器 占据 了 绝 大 多 
数 市 场 份 额 。 








术语 
本 书 假定 目标 读者 具备 一 定 的 CSS 知识 ， 但 他 们 对 有 些 术 语 可 能 不 熟悉 ， 因 此 书 中 会 对 一 
些 术 语 作出 解释 。 下 面 这 些 术语 更 为 基础 ， 先 在 这 里 列 出 来 。 


。 选择 器 是 指 为 一 个 或 一 组 元 素 添 加 样式 时 所 使 用 的 模式 。 

。 声明 块 是 一 组 规则 ， 表 示 为 HTML 元 素 应 用 什么 属性 ， 属 性 取 什么 值 。 
。 属性 表明 为 选中 的 元 素 应 用 什么 样式 。 我 们 需要 为 属性 指定 取 值 。 

。 规则 集 由 一 个 或 多 个 选择 器 和 一 个 声明 块 组 成 。 





























例 P-1 的 CSS 代码 要 求 浏览 器 为 所 有 段落 应 用 蓝 色 、16px (像素 ) 大 小 的 样式 。p 为 选 
feds, VRAI a 左右 花 括号 之 间 的 所 有 内 容 为 声明 块 。 该 声明 
块 包括 两 条 产 明 语 句 : 第 一 条 为 color 属性 赋值 #1200FF, 2 —24 font-size 属性 赋值 
16px。 整 个 这 i | 集 。 为 了 方便 理解 ， 我 们 在 图 P-1 中 标明 了 规则 集 的 各 
个 组 成 部 分 。 


例 P-1 规则 集 示例 


p { 
color: #1200FF; 
font-size: 16px; 























声明 语句 
| 


Dik | 
color: #1200FF ; 


font-size: |16px;; 



































属性 属性 值 











P-1: CSS 规则 集 图 解 


配套 网 站 提供 的 内 容 


本 书 的 配套 网 站 http:/www.cssrefactoringbook.com 提供 以 下 内 容 : 








。 本 书 各 示例 的 代码 文件 
。 偶尔 会 发 博客 文章 





。 好 文章 、 演 讲稿 和 其 


























。 勘误 和 纠 错 信息 


本 书 是 要 帮 你 完成 工作 的 。 


序 或 文档 





获得 许可 ;引用 本 


中 。 除 非 你 使 用 了 很 大 一 





品 文档 中 则 需要 获得 许可 。 





我 们 很 希望 但 六 





F 不 强制 要 求 你 在 引用 本 二 


作者 、 出 版 社 和 ISBN。 比 如 : “ 
Steve Lindstrom (O’Reilly). Copyright 2017 Steve Lindstrom, 978-1-491-90642-2” , 


他 资源 的 链接 

















一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 





部 分 代码 ， 否 则 无 需 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 




















区 中 的 示例 代码 回答 问题 无 需 获 得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 





内容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包括 书 名 、 





“CSS Refactoring: Architect Your Stylesheets for Success by 








如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions @ 
oreilly.com 与 我 们 联系 。 


排版 约定 


本 书 使 用 了 下 列 排版 约定 。 





。 黑体 


表示 新 术语 或 重点 强调 的 内 容 。 


。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 
和 关键 字 等 。 


。 加 粗 等 宽 字 体 (constant width bold) 


表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 





。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 











图 标 表 示 提 示 或 和 


E 














函数 名 、 数 据 库 、 数 据 类 型 、 环 境 变量 、 语 名 





Tii} 


该 图 标 表示 一 般 标 注 。 





该 图 标 表示 警告 或 警示 。 


O’Reilly Safari 


4 Safari (原来 叫 Safari Books Online) 是 面向 人 企业、 政府、 教育 从 
Safari ww 才 和 个 人 的 会 员 制 才 训 和 参考 咨询 平台 。 


我 们 向 会 员 开 放 成 千 上 万 本 图 书 以 及 培训 视频 、 学 习 路 线 、 交 互 式 教程 和 专业 视频 。 这 
些 资源 来 自 250 多 家 出 版 机 构 ， 其 中 包括 O'Reilly Media, Harvard Business Review, 
Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, 
Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan 
Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press. Apress, Manning, New 


Riders, McGraw-Hill, Jones & Bartlett 和 Course Technology, 


更 多 信息 ， 请 访问 http://oreilly.com/safari, 


+ + 
联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 





中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公 司 


我 们 为 本 书 做 了 一 个 网 页 ， 把 勘误 信息 、 示 例 代码 和 其 他 附加 信息 列 在 了 上 面 。 地 址 是 : 
http://bit.ly/css-refactoring。 








对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 


bookquestions@oreilly.com 








要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 











我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 





请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 
http://www.youtube.com/oreillymedia 


致谢 


写作 本 书 的 过 程 让 我 真切 地 感受 到 了 自己 的 不 足 。 














一 天 晚上 ， 我 心血 来 潮 ， 毛 遂 自 荐 ， 给 O'Reilly Media 发 了 一 封 简单 的 邮件 ， 附 上 了 我 对 
于 这 本 书 的 构思 。 邮 件 发 出 去 之 后 ， 我 志 亚 不 安 起 来 ， 但 很 快 就 把 这 事 抛 诸 脑 后 了 ， 因 为 
我 压根 就 没 指望 收 到 回信 。 


后 来 ， 我 却 收 到 了 O’Reilly Wa, WEAR. KOREA BRK, RIAA CS 
了 头 ， 但 是 跟 Simon St. Laurent, Brian MacDonald 和 Meg Foley 的 合作 非常 愉快 。 我 尤其 
感激 本 书 的 编辑 Meg Foley， 因 为 她 非常 通 情 达 理 ， 不 断 地 鼓励 我 ， 尽 管 我 一 次 又 一 次 没 
能 在 截止 日 期 前 交 稿 。 我 之 前 表示 过 歉意 ， 现 在 容 我 再 说 一 次 对 不 起 ，Meg | 


本 书 中 的 技巧 、 策 略 和 想法 ， 是 我 多 年 来 从 各 处 收集 来 的 。 书 中 的 大 部 分 概念 都 不 是 我 提 
出 来 的 ， 因 此 ， 首 先 我 想 感谢 前 人 贡献 了 这 些 概念 。 加 入 Web 开发 社区 非常 有 好 处 ， 因 
为 社区 有 很 多 聪明 人 ， 他 们 愿意 跟 别 人 分 享 自己 的 想法 。 我 希望 能 通过 此 书 为 社区 尽 绵 注 
as 


写 一 本 书 比 我 预想 的 难 多 了 ， 写 作 过 程 很 耗 时 ， 而 且 需 要 我 独自 完成 ， 幸 好 工作 时 周围 有 
好 友 相 伴 。 每 当 写 不 下 去 时 ， 我 就 想起 Andy Denmark， 他 的 职业 道德 超 好 ， 我 从 他 那里 
eB T ADRE. Thor Denmark 还 教 我 如 何在 顺境 和 逆境 中 都 保持 积极 的 态度 ， 使 我 不 至 
于 陷入 困境 无 法 自拔 。Nate Racklyeft 和 Josh Hudner 阅读 了 本 书 的 初稿 ， 并 给 出 了 大 量 宝 
贵 的 反馈 意见 ， 极 大 提高 了 本 书 的 质量 。Erin Wallace 从 事 设 计 工 作 ， 整 天 跟 组 织 、 过 程 
和 细节 打交道 ， 她 的 反馈 意见 也 非常 有 价值 ， 有 助 于 我 润色 书稿 ， 使 其 更 容易 理解 。 他 们 
每 天 都 关注 着 我 ， 促 使 我 每 天 都 比 前 一 天 进步 一 点 。 为 此 ， 我 对 他 们 感激 不 尽 。 






















































































此 外 ， 我 还 要 郑重 感谢 Christopher Schmitt， 他 审阅 了 本 书 。 得 知 他 审阅 我 的 作品 时 ， 我 觉 
得 他 的 名 字 很 熟悉 ， 果 不 其 然 ， 我 的 案头 上 就 摆 着 他 的 两 本 大 作 。Christopher， 你 的 批注 
对 我 帮助 很 大 。 我 刚 开 始 学 CSS 时 ， 你 的 著作 让 我 受益 匪 浅 。 非 常 感谢 你 抽出 时 间 帮 助 一 
个 陌生 人 。 和 希望 我 有 机 会 报答 你 ! 


如 果 不 感谢 培养 我 、 影 响 我 、 使 我 变 成 今天 这 个 模样 的 家 人 ， 致 谢 部 分 就 不 完整 。 我 的 
父母 总 是 鼓励 我 读书 ， 我 现在 仍 努 力 多 读书 、 少 看 电视 。 小 时 候 ， 父 亲 就 送 给 了 我 一 本 
O’Reilly HP (我 的 第 一 本 O'Reilly 图 书 ， 我 记得 是 讲 C 语言 的 )。 我 选择 IT 作为 职业 ， 
很 大 程度 上 源 于 父亲 的 鼓励 和 他 从 事 的 职业 。 母 亲 和 哥 哥 也 是 我 的 灵感 源 果 ， 并 给 予 我 巨 
大 鼓舞 ， 你 们 对 我 的 关爱 难以 言 谢 。 


最 后 ， 我 想 感谢 咖啡 。 我 爱 你 ， 咖 啡 。 


电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 






















































































第 1 章 


ERIE 





本 章 是 CSS 重 构 之 旅 的 起 点 ， 将 介绍 重 构 是 什么 ， 以 及 它 与 软件 架构 之 间 有 什么 关系 。 我 
们 还 将 讨论 重 构 的 重要 性 以 及 你 的 代码 也 许 需要 重 构 的 原因 。 我 们 将 通过 两 个 重 构 的 示 
例 ， 帮 助 你 理解 这 些 概念 。 


1.1 fAa4eEBYy 


重 构 是 指 在 不 改变 代码 行为 的 前 提 下 ， 重 写 代 码 ， 使 其 更 加 简洁 、 易 于 复 用 。 如 果 你 正在 
写 代 码 ， 那 么 重 构 是 你 应 该 掌握 的 一 项 核心 技能 ， 因 为 不 管 你 想 不 想 ， 有 时 你 都 不 得 不 重 
构 代 码 。 你 也 许 已 重 构 过 代码 ， 只 是 自己 没有 意识 到 。 既 然 重 构 不 改变 代码 的 行为 ， 那 么 
学 习 重 构 之 前 你 想 先 弄 清楚 重 构 的 必要 性 也 是 可 以 理解 的 。 但 是 ， 在 回答 这 个 问题 之 前 ， 
需要 先 来 理解 软件 架构 。 


1.2 ”什么 是 软件 架构 


就 像 生物 一 样 ， 软 件 系 统 通 常 由 很 多 较 小 的 部 件 组 成 ， 每 个 部 件 擅 长 做 一 件 事 。 将 这 些 间 
件 组 合 起 来 ， 一 起 工作 ， 可 形成 更 大 的 软件 系统 。 术 语 软件 架构 用 来 描述 软件 项 目的 各 个 
不 同 部 件 之 间 的 组 合 方式 。 



























































从 简单 的 网 站 到 复杂 的 宇宙 飞船 控制 系统 ， 每 一 种 软件 都 有 自己 的 架构 ， 不 管 开发 人 员 有 
意 还 是 无 意 为 之 。 然 而 ， 最 好 的 架构 通常 在 编码 工作 开始 之 前 做 过 续 密 规划 。 下 面 是 优秀 
架构 所 有 具备 的 一 些 最 重要 的 特点 。 














1.2.1 优秀 架构 是 可 预测 的 

软件 架构 可 预测 是 指 可 以 对 软件 的 工作 方式 和 结构 做 出 准确 的 假设 。 可 预测 性 表明 预先 的 
规划 是 合理 的 ， 并 有 助 于 节省 开发 时 间 ， 因 为 可 以 避免 下 列 问题 : 

。 组 件 的 功能 是 什么 


。 某 一 段 代 码 在 何 处 
。 新 代码 加 到 何 处 





























在 可 预测 的 架构 中 ， 人 们 可 以 做 出 精确 的 假设 ， 不 熟悉 代码 的 开发 人 员 也 能 够 更 快 地 理解 
该 架构 。 


1.2.2 ”优秀 架构 可 提升 代码 复 用 性 

代码 复 用 是 指 在 多 处 使 用 同一 代码 而 无 需 重 写 。 代 码 复 用 优势 明显 ， 不 用 重 写 已 有 代码 ， 
可 以 加 快 开发 速度 。 同 理 ， 解 决 某 一 问题 所 需 的 代码 越 少 ， 维 护 所 有 用 该 代码 实现 的 功能 
所 需 的 时 间 就 越 少 。 例 如 ， 你 在 一 段 代码 中 发 现 了 一 处 bug， 而 由 于 项 目 多 处 用 到 该 代码 ， 
故 将 bug 带 到 了 多 处 。 你 只 需 在 一 个 位 置 修复 该 bug， 就 可 以 相应 修复 其 他 各 处 的 bug。 


1.2.3 ”优秀 架构 可 扩展 

可 扩展 性 是 优秀 架构 所 遵循 的 一 项 原则 ， 在 具备 该 特点 的 系统 上 增加 新 功能 很 容易 。 大 多 数 
软件 无 法 在 一 天 之 内 开发 完成 ， 因 此 软件 架构 适 于 增 量 开发 ， 且 不 需要 做 大 的 结构 性 变化 ， 
这 一 点 非常 重要 。 如 果 项 目 开发 过 程 需要 频繁 地 对 架构 做 出 较 大 的 改动 ， 发 布 将 非常 困难 。 


1.2.4 ”优秀 架构 可 维护 

跟 可 扩展 性 非常 类 似 ， 可 维护 性 对 于 架构 也 很 重要 。 对 于 可 维护 的 优秀 架构 ， 修 改 其 现 有 
功能 很 容易 。 随 着 时 间 的 推进 ， 需 求 也 许 会 发 生变 化 。 迫 于 需求 变动 的 压力 ， 你 将 修改 代 
码 。 可 维护 性 软件 是 指 你 修改 一 处 代码 时 ， 没 必要 大 规模 改动 其 他 代码 。 


1.2.5 ”软件 架构 和 重 构 

艇 括 来 讲 ， 重 构 有 助 于 维护 和 提升 软件 架构 。 重 构 就 是 指 调整 代码 结构 、 使 其 更 具 意义 的 
一 套 技术 。 重 构 可 使 代码 可 预测 、 可 复 用 、 可 扩展 和 可 维护 。 当 你 的 软件 架构 具备 了 上 述 
特点 时 ， 它 对 目标 用 户 而 言 将 更 可 靠 ， 你 在 其 上 继续 开发 也 会 更 加 愉快 ! 


1.3 ”需要 重 构 的 原因 


为 什么 当初 不 把 代码 写 正 确 ， 这 样 日 后 不 就 没 必 要 重 构 了 ? 尽管 我 们 一 心 想 设计 和 编写 最 
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高 质量 的 代码 ， 但 是 随 着 时 间 的 推移 ， 一 些 因 素 将 发 生变 化 ， 导 致 需要 重 构 代 码 。 我 们 一 
起 来 看 看 其 中 几 个 原因 。 








1.3.1 需求 变更 

软件 系统 随 着 需求 的 变动 而 进化 。 软 件 在 编写 时 是 为 了 满足 一 组 需求 ， 可 能 没有 考虑 男 一 
组 需求 ，( 没 有 写 出 来 ， 也 不 应 该 写 出 来 )。 因 此 ， 需 求 变更 时 ， 代 码 也 必须 随 之 改变 。 此 
外 ， 如 果 软 件 开 发 还 有 时 间 要 求 ， 有 时 会 为 优先 满足 功能 的 实现 而 走 “ 捷 径 "， 进 而 可 能 
会 影响 代码 质量 。 











1.3.2 ”架构 设计 不 合理 

即使 你 知道 什么 是 优秀 架构 ， 投 入 大 量 时 间 事 先 规 划 好 一 切 并 不 总 是 可 行 的 。 开 发 之 初 ， 
你 若 不 知道 各 组 件 的 组 合 方式 ， 开 发 过 程 也 许 需要 重 构 。 非 常常 见 的 做 法 是 ， 快 速 开发 一 
个 新 功能 (可 能 会 为 实现 功能 而 走 “ 捷 径 ”)， 以 验证 它 对 用 户 是 否 有 吸引 力 。 如 确实 能 够 
吸引 用 户 ， 再 将 代码 整理 干净， 如 达 不 到 预期 效果 ， 则 删除 代码 。 












































1.3.3 低估 困难 
预 估 软件 开发 需要 多 长 时 间 很 难 ， 但 不 幸 的 是 ， 我 们 常常 根据 估计 结果 来 安排 开发 计划 。 
如 果 项 目 开 发 周期 被 低估 ， 将 迫使 开发 人 员 “ 为 了 完成 而 完成 " ， 导 致 他 们 快速 编写 代码 ， 
而 不 会 花 很 多 时 间 思 芳 。 如 果 该 情况 经 常 发 生 ， 即 使 最 完美 的 代码 也 可 能 会 变 为 一 大 盘子 
“意大利 面条 式 代码 ”， 难 以 理解 和 管理 。 















































13.4 忽视 最 佳 实践 

跟 上 每 一 种 最 佳 实践 的 发 展 步伐 很 难 ， 当 你 的 工作 涉及 多 种 技术 和 人 员 管 理 时 更 是 如 此 。 
如 果 你 们 是 一 个 团队 协同 工作 ， 而 你 忽视 了 最 佳 实 践 ， 我 希望 有 同事 能 提醒 你 。 如 果 错 过 
使 用 最 佳 实践 的 机 会 ， 日 后 你 也 许 需 要 重新 审查 你 的 代码 并 进行 一 定 程度 的 重 构 。 


























紧 跟 最 佳 实践 的 难点 所 在 


技术 发 展 日 新 月 异 ， 因 此 之 前 的 最 佳 实 践 也 许 优势 不 再 。 例 如 ，2011 年 之 前 ， 在 网 站 
上 展示 具有 圆 角 的 容器 ， 需 要 为 每 个 角 挂 一 张 图 片 ， 将 图 片 误 入 到 HTML 之 中 ， 然 后 
用 CSS 为 图 片 定位 ， 确 保 各 元 素 排 列 有 序 。 如 今 这 项 技术 已 过 时 ， 因 为 现在 的 浏览 器 
用 CSS Æ tł border-radius 就 能 实现 圆 角 。 如 果 你 不 持续 更 新 代码 来 使 用 这 些 最 佳 实 
践 ， 你 的 技术 债务 将 随时 间 的 发 展 而 增加 ， 代 码 将 变 得 非常 糟糕 。 
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1.4 什么 情况 下 应 该 重 构 代 码 


结合 代码 的 上 下 文 重 构 代码 会 更 加 容易 。 因 此 ， 如 果 你 修复 的 bug 或 开发 的 新 功能 用 到 了 
已 有 代码 ， 重 构 是 最 好 的 选择 。 处 理 小 任务 时 顺便 重 构 代 码 ， 不 至 于 把 一 切 搞 乱 ， 他 人 大 
修改 你 重 构 过 的 代码 也 能 从 中 受益 。 不 断 坚 持 重 构 代 码 ， 代 码 质量 将 达到 卓越 ， 前 提 是 你 
的 改动 符合 优秀 架构 的 特点 。 


然而 ， 有 时 你 会 遇 到 一 段 有 很 多 依赖 的 代码 ， 也 许 需要 决定 是 否 对 甚 重 构 。 重 构 有 很 多 依 
赖 的 代码 ， 就 像 抽 衣服 上 的 线 : 抽 得 越 多 ， 散 开 得 越 多 。 类 似 地 ， 对 于 具有 很 多 依赖 的 代 
码 ， 你 改动 得 越 多 ， 需 要 更 新 的 依赖 就 越 多 。 遇 到 这 种 情况 ， 如 果 时 间 很 紧 ， 先 把 工作 完 
成 也 许 更 适合 ， 然 后 再 匀 出 些 时 间 ， 回 头 审视 并 重 构 代 码 。 然 而 ， 如 果 开 发 过 程 中 重 构 某 
些小 功能 不 至 于 严重 影响 到 开发 计划 ， 你 也 许可 以 考虑 及 时 重 构 它们 。 


1.5 ”什么 情况 下 不 应 该 重 构 代码 


知道 什么 情况 下 不 应 该 重 构 ， 其 至 比 知道 什么 情况 下 应 该 重 构 更 为 重要 。 重 构 名 声 不 太 
好 ， 因 为 有 时 看 起 来 软件 开发 人 员 只 是 为 了 重 写 而 重 写 。 代 码 也 许 是 别人 写 的 ， 没 必要 重 
构 ， 但 患 有 “不 是 我 写 的 症 ” 的 开发 人 员 一 定 要 对 其 重 构 ， 因 为 他 们 认为 不 是 自己 写 的 代 
码 就 不 是 好 代码 。 或 者 ， 有 一 天 开发 人 员 心 血 来 潮 ， 不 再 喜欢 之 前 的 代码 编写 方法 (也 许 
之 前 类 名 使 用 下 划 线 而 不 是 连 字 符 ， 现 在 想 改 过 来 )， 因 此 他 们 钻 入 重 构 的 兔子 洞 以 求 止 
痒 。 很 多 情况 下 ， 这 些 工作 被 视 为 “ 磨 洋 工 "， 它 让 人 们 感觉 效率 很 高 ， 事 实 上 并 非 如 此 。 
第 5 章 将 讨论 如 何 通过 编写 一 套 编码 规范 形成 编码 计划 。 那 时 ， 你 将 更 加 清楚 ， 仅 当 重 构 
能 够 改善 架构 或 使 代码 符合 编码 规范 时 ， 才 应 进行 重 构 。 


+ 人 已 x 

1.6 我 能 重 构 自 己 的 代码 吗 

如 果 你 正在 开发 个 人 项 目 ， 答 案 为 响亮 的 “能 ! “。 但 是 如 果 你 为 组 织 工作 ， 且 不 处 在 管理 
岗位 ， 答 案 也 许 没 有 那么 肯定 。 理 想 情 况 下 ， 每 个 组 织 都 理解 重 构 的 重要 性 ， 但 现实 往往 
并 非 如 此 。 如 果 同 事 缺 乏 重 构 方面 的 技术 知识 ， 你 也 许可 以 尝试 教 教 他 们 ， 别 忘 了 推荐 我 
这 本 书 ! 
对 软件 项 目的 代码 质量 负责 的 聪明 人 很 可 能 理解 重 构 的 意义 ， 但 是 不 能 理解 的 人 可 能 会 持 
有 以 下 意见 : 


。 花 时 间 重 写 代码 ， 却 又 看 不 到 功能 上 的 变化 ， 既 浪费 时 间 ， 又 浪费 钱 ; 
。 如 有 果 代 码 还 能 正常 工作 ， 没 必要 修复 ; 
。 你 应 该 当初 就 把 代码 写 正确 。 


如 果 别 人 持 有 以 上 理由 ， 而 你 对 重 构 有 足够 的 信心 ， 我 建议 你 重 构 代 码 ， 只 要 你 能 够 保证 
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FREE, HEMER, PEREDA BNR PRY BY HEHE, RT MA Ab A AS 
加 过 代码 评审 会 议 ， 因 此 你 的 改动 可 能 不 会 被 注意 到 。 然 而 ， 如 果 只 是 为 重 构 而 重 构 ， 你 
也 许 需 要 考虑 等 到 有 必要 改动 时 再 重 构 ， 不 成 熟 的 优化 往往 跟 技 术 债务 同样 糟糕 。 


1.7 重 构 示例 


你 对 重 构 的 好 处 和 时 机 (以 及 何 时 不 能 重 构 ) 有 了 整体 理解 后 ， 我 们 可 以 开始 讨论 怎样 重 
构 代 码 了 。 


尽管 本 书 是 讲 代码 重 构 的 ， 但 我 们 首先 通过 一 段 计算 电子 商务 订单 总 价 的 代码 和 改变 
HTML 元 素 样式 的 代码 分 析 这 个 概念 ， 这 样 理 解 起 来 会 更 容易 。 因 此 ， 我 们 的 第 一 个 示例 
将 展示 重 构 基本 的 JavaScript 代码 的 方法 ， 该 代码 计算 电子 商务 订单 的 总 价 。 第 二 个 示例 
将 重 构 一 部 分 CSS 代码 。 









































代码 示例 


长 篇 累 胰 的 代码 ， 或 长 达 几 页 ， 或 散布 于 多 个 文件 ， 难 以 理解 ， 故 本 书 代码 
示例 将 使 用 简短 的 代码 片段 。 第 一 个 示例 的 所 有 JavaScript 代码 可 以 嵌入 到 
HTML 文件 中 ， 方 便 运 行 。 


对 于 更 复杂 的 示例 ， 定 义 元 素 整体 外 观 和 样式 的 CSS 将 置 于 单独 的 CSS 文 
件 中 。 


本 书 代 码 中 用 到 的 行内 样式 (位 于 <style> 和 </style> 标签 之 间 ) 直接 服 
务 于 当前 示例 ， 用 来 解释 一 个 单独 的 概念 。 


本 书 所 有 代码 均 可 从 配套 网 站 下 载 : https://www.cssrefactoringbook.com。 









































1.7.1 重 构 示例 1: 计算 电子 商务 订单 的 总 价 


例 1-1 包含 一 段 JavaScript 代码 ， 用 户 提供 以 下 内 容 后 ， 可 计算 电子 订单 的 总 价 : 


。 所 购 商 品 的 单价 

。 每 种 商品 的 购买 数量 

。 每 种 商品 的 单位 运费 

。 顾客 的 地 址 信息 

。 可 选择 使 用 的 、 能 降低 订单 价格 的 折扣 码 


例 1-1 计算 电子 商务 订单 总 价 


闪光 


* 打 过 折 、 加 入 运费 和 税 费 之 后 ， 计 算 订 单 总 价 。 
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* @param {Object} customer 一 顾客 信息 ， 关 于 下 订单 者 的 一 组 信息 。 


* + 


@param {Array.<Object>} LineItens 一 一 数组 ， 包 括 所 购 商 品 、 商 品 数量 及 每 种 商品 的 
单位 运费 。 


可 选择 使 用 的 折扣 码 ， 加 入 运费 和 税 费 之 前 使 用 该 码 。 





* 














* @param {string} discountCode 
* 
/ 

var getOrderTotal = 
var discountTotal = 0; 
var lineItemTotal = 0; 
var shippingTotal = 0; 
var taxTotal = 0; 











function (customer, lineItems, discountCode) { 


for (var i = 0; i < lineItems.length; i++) { 
var LineItem = lineItems[i]; 
LineItemTotal += lineItem.price * lineItem.quantity; 
shippingTotal += LineItem.shippingPrice * LineItem.quantity; 


i 


if (discountCode === '2@PERCENT') { 
discountTotal = lineItemTotal * 0.2; 


} 


if (customer.shiptoState === 'CA') { 
taxTotal = (lineItemTotal - discountTotal) * 0.08; 


} 


var total = ( 
lineItemTotal - 
discountTotal + 
shippingTotal + 
taxTotal 

); 


return total; 


}; 





使 用 例 1-2 中 的 数据 ， 调 用 getOrderTotal 函数 ， 得 到 总 价 。 程 序 输出 Total: $266, fl 
1-3 解释 了 为 什么 会 输出 这 个 结果 。 








例 1-2 用 测试 数据 运行 getOrderTotal 函数 
var lineItem1 = { 
price: 50, 
quantity: 1, 
shippingPrice: 10 
}; 


var lineItem2 = { 
price: 100, 
quantity: 2, 
shippingPrice: 20 
3; 





var lineItems = [lineItem1, lLineItem2]; 
var customer = { 


shiptoState: 'CA' 
}; 


var discountCode = '20PERCENT'; 
var total = getOrderTotal(customer, lineItems, discountCode); 
document.writeln('Total: $' + total); 


例 1-3 解释 为 什么 getorderTotal 国 数 输 出 Total: $266 
discountTotaL = 0 


LineItemTotaL = 0 
shippingTotal = 0 
taxTotal = 0 


# FORARE KIRK: 
lineItemTotal = 0 + (50 * 1 
shippingTotal = 0 + (10 * 1 


Cw 
oil 


# FOR 循 环 第 2 次 迭代 : 
LineItemTotaL = 50 + (100 * 2) = 250 
shippingTotal = 10 + (20 * 2) = 50 


# discountCodeyy “20%”, ifdidiscountTotal: 
discountTotal = 250 * 0.2 = 50 


# customer .shiptoState% “CA”, 计算 taxTotal: 
taxTotal = (250 - 50) * 0.08 = 16 


total = 250 - 50 + 50 + 16 = 266 


1. 单元 测试 

运行 完 计算 过 程 ， 得 到 计算 结果 ， 一 切 似乎 按照 预期 进行 。 为 了 确保 每 次 都 能 得 到 正确 结 
果 ， 现 在 来 编写 单元 测试 。 简 单 来 讲 ， 单 元 测试 是 指 执行 另 一 段 代 码 的 一 段 代 码 ， 以 保证 
代码 按照 预期 工作 。 单 元 测试 应 该 用 来 测试 单一 功能 ， 以 缩小 任何 可 能 发 现 的 问题 的 根本 
原因 的 范围 。 另 外 ， 发 布 任何 新 代码 之 前 ， 都 应 该 为 你 的 项 目 编写 一 组 单元 测试 并 运行 ， 
以 便 尽 早 发 现 和 修复 引入 系统 的 新 bug。 


























例 1-2 的 输入 数据 可 用 来 编写 单元 测试 〈 见 例 1-4)， 我 们 断言 函数 返回 预期 值 (266)。 运 行 
完 测 试 代码 ， 将 输出 测试 成 功 和 失败 的 次 数 ， 对 于 没有 通过 测试 的 ， 将 输出 期 望 值 和 实际 值 。 























例 1-4 为 getorderTotal 函数 编写 的 单元 测试 
var successfulTestCount = 0; 
var unsuccessfulTestCount = 0; 
var unsuccessfulTestSummaries = []; 
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[** 

* Wr eygetOrdertotal() Ait SIE MA. 
<] 

var testGetOrderTotal = function () { 


// 设 定期 望 得 到 的 结果 
var expectedTotal = 266; 
// 设 定 测试 数据 
var lineItem1 = { 

price: 50, 

quantity: 1, 


shippingPrice: 10 
J; 
var lineItem2 = { 
price: 100, 
quantity: 2, 


shippingPrice: 20 
}; 


var lineItems = [lineItem1, lineItem2]; 
var customer = { 
shiptoState: 'CA' 
J}; 
var discountCode = '20PERCENT'; 


var total = getOrderTotal(customer, lineItems, discountCode); 


// 比较 函数 的 计算 结果 与 期 望 得 到 的 结果 


if (total === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 
unsuccessfulTestSummaries.push( 
"testGetOrderTotal: expected ' + expectedTotal + 


3 actual ' + total 
); 
} 
}; 


// 运行 测试 
testGetOrderTotal(); 


document.writeln(successfulTestCount + 
document.writeln(unsuccessfulTestCount + 


successful test(s)<br/>'); 
' unsuccessful test(s)<br/>'); 


if (unsuccessfulTestCount) { 
document.writeln('<ul>'); 
for(var i = 0; i < unsuccessfulTestSummaries. length; i++) { 
document.writeln('<li>' + unsuccessfulTestSummaries[i] + '</li>'); 





} 


document.writeln('</ul>'); 


} 


执行 testGetOrderTotal 函数 ， 断 言 成 功 通过 ， 如 图 1-1 所 示 。 

























eee ® testGetOrderTotal() x 
eoch 











1 successful test(s) 
0 unsuccessful test(s) 








图 1-1: 成 功 通过 单元 测试 


然而 ， 如 果 以 后 出 于 某 种 原因 引入 了 bug， 导 致 计算 discountTotal 所 用 的 乘 数 从 0.2 变 为 
-0.2， 单 元 测试 结果 就 会 发 生变 化 ， 我 们 将 会 得 到 图 1-2 所 示 的 结果 。 














eee 思 testGetOrdertotal() x KR Be 
e> ca = 


0 successful test(s) 
1 unsuccessful test(s) 











e testGetOrderTotal: expected 266; actual 374 











图 1-2: 失败 的 单元 测试 
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日 





单元 测试 非常 强大 ， 可 以 保证 你 的 系统 按照 预期 工作 。 重 写 代码 时 ， 它 的 帮助 尤其 大 ， 
为 使 用 断言 可 帮助 你 确认 代码 的 行为 没有 发 生变 化 。 














现在 你 理解 了 计算 电子 商务 订单 总 价 的 代码 ， 并 实现 了 相应 的 单元 测试 代码 ， 下 面 一 起 看 











看 对 其 重 构 能 带 来 哪些 好 处 。 





2. 重 构 getOrderTotal 
仔细 分 析 getOrderTotal 函数 ， 不 难 发 现 该 函数 内 实现 了 多 种 计算 : 


从 总 价 中 减 去 的 折扣 
订单 中 所 有 商品 的 总 价 
总 运费 

总 税额 

订单 总 价 








如 果 上 述 五 项 中 任意 一 项 的 计算 过 程 引 入 bug， 单 元 测试 〈testGetorderTotaL) 将 告诉 我 们 
出 错 了 ， 但 是 不 会 明确 指出 bug 的 位 置 。 这 正 是 单元 测试 应 该 测试 单一 功能 的 主要 原因 。 











为 了 让 代码 所 实现 功能 的 粒度 更 细 ， 上 面 提 到 的 这 些 计算 都 应 该 抽取 出 来 ， 作 为 单独 的 一 
个 函数 ， 并 且 用 能 够 描述 其 功能 的 名 称 作 为 函数 名 ， 请 见 例 1-5。 


例 1-5 抽取 代码 片段 ， 形 成 新 函数 

















KK 


* 计算 所 有 Line items 的 总 价 。 


* @param {Array.<Object>} LineItems 一 一 数组 ， 包 括 所 购 商 品 、 商 品 数 量 及 
每 种 商品 的 单位 运费 。 


* @returns {number} 一 一 所 有 line items 的 总 价 。 
ah 
var getLineItemTotal = function (lineItems) { 
var lineItemTotal = 0; 


for (var i = 0; i < lineItems.length; i++) { 
var LineItem = lineItems[i]; 
lineItemTotal += lineItem.price * LlineItem.quantity; 


} 


return LineItemTotal; 


}; 
** 


* 计算 所 有 Line items 的 总 运费 。 


* @param {Array.<Object>} LineItems 一 一 数组 ， 包 括 所 购 商 品 、 商 品 数 量 及 
每 种 商品 的 单位 运费 。 


* @returns {number} 一 一 所 有 line items 的 运费 。 
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*/ 
var getShippingTotal = function (lineItems) { 
var shippingTotal = 0; 


for (var i = 0; i < lineItems.length; i++) { 
var lineItem = lineItems[i]; 
shippingTotal += LineItem.shippingPrice * LineItem. quantity; 























} 
return shippingTotal; 
[** 
* 计算 一 个 订单 的 总 价 按照 折扣 减 去 了 多 少 钱 。 
j @param {number} lineItemTotal 一 一 所 有 line items 的 总 价 。 
: @param {string} discountCode 一 一 可 选择 使 用 的 折扣 码 ， 加 入 运费 和 税 费 之 前 使 用 该 码 。 


@returns {fnumber]} 一 一 订单 总 价 按照 折扣 减 去 了 多 少 钱 。 

*/ 

var getDiscountTotal = function (lineItemTotal, discountCode) { 
var discountTotal = 0; 









































if (discountCode === '20PERCENT') { 
discountTotal = lineItemTotal * 0.2; 

} 

return discountTotal; 
}; 
/** 
* 计算 一 个 订单 应 缴纳 的 总 税 费 。 
* 
* @param {number} LineItemTotal——fif Aline items 的 总 价 。 
* 
* @param {Object} customer mae, KP sah Aes. 
* 
* @returns {number} 一 一 一 个 订单 应 缴纳 的 总 税 费 。 
*/ 


var getTaxTotal = function () { 
var taxTotal = 0; 


if (customer.shiptoState === 'CA') { 
taxTotal = lineItemTotal * 0.08; 


} 


return taxTotal; 


F 
我 们 应 该 为 每 个 新 函数 编写 如 例 1-6 所 示 的 单元 测试 。 
例 1-6 JH JavaScript 为 新 抽取 出 来 的 函数 编写 的 单元 测试 


/** 
* 断言 getLineItemTotal 的 计算 结果 符合 预期 。 
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*/ 


var testGetLineItemTotal = function () { 
var LineItem1 = { 


J; 


price: 50, 
quantity: 1 


var lineItem2 = { 


J; 


price: 100, 
quantity: 2 


var lineItemTotal = getLineItemTotal([lineItem1, lineItem2]); 
var expectedTotal = 250; 


if (lineItemTotal === expectedTotal) { 


} 


}; 
[** 


successfulTestCount++; 
else { 
unsuccessfulTestCount++; 


unsuccessfuLTestSummaries.push( 


"testGetLineItemTotal: expected ' + expectedTotal + 


LineItemTotal 
); 


* 断言 getShippingTotal 的 计算 结果 符合 预期 。 


*/ 


var testGetShippingTotal = function () { 
var lineItem1 = { 


quantity: 1, 
shippingPrice: 10 


3 actual ' + 


J; 
var lineItem2 = { 
quantity: 2, 
shippingPrice: 20 
}; 
var shippingTotal = getShippingTotal([lineItem1, lineItem2]); 
var expectedTotal = 250; 
if (shippingTotal === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 


unsuccessfuLTestSummaries.push( 


"testGetShippingTotal: 


shippingTotal 
) ; 


expected ' + expectedTotal + 


3 actual ' + 








* 确保 使 用 有 效 的 折扣 码 时 ，GetDiscountTotal 的 计算 结果 符合 预期 。 

i 

var testGetDiscountTotalWithValidDiscountCode = function () { 
var discountTotal = getDiscountTotal(100, '20PERCENT'); 
var expectedTotal = 20; 


if (discountTotal === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 

unsuccessfuLTestSummaries.push( 
'testGetDiscountTotalWithValidDiscountCode: expected ' + expectedTotal + 
'; actual ' + discountTotal 


); 
}; 


kk 


* 确保 使 用 无 效 的 折扣 码 时 ，GetDiscountTotal 的 计算 结果 符合 预期 。 
*/ 
var testGetDiscountTotalWithInvalidDiscountCode = function () { 


var discountTotal = get_discount_total(100, '90PERCENT ' ) ; 
var expectedTotal = 0; 





if (discountTotal === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 

unsuccessfuLTestSummaries.push( 
"testGetDiscountTotalWithInvalidDiscountCode: expected ' + expectedTotal + 
'; actual ' + discountTotal 














)s 
} 
}; 
/** 
* 确保 顾客 住 在 加 利 福 尼 亚 时 ，GetTaxTotal 的 计算 结果 符合 预期 。 
*/ 


var testGetTaxTotalForCaliforniaResident = function () { 
var customer = { 

shiptoState: 'CA' 

}; 


var taxTotal = getTaxTotal(100, customer); 
var expectedTotal = 8; 


if (taxTotal === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 

unsuccessfulTestSummaries .push( 
'testGetTaxTotalForCaliforniaResident: expected ' + expectedTotal + 
'; actual ' + taxTotal 


J; 
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Js 
/** 
* 确 保 顾 客 不 住 在 加 利 福 尼 亚 时 ，GetTaxTotal 的 计算 结果 符合 预期 。 
*/ 


var testGetTaxTotalForNonCaliforniaResident = function () { 
var customer = { 
shiptoState: 'MA' 
J; 


var taxTotal = getTaxTotal(100, customer); 
var expectedTotal = 0; 


if (taxTotal === expectedTotal) { 
successfulTestCount++; 
} else { 


unsuccessfulTestCount++; 

unsuccessfulTestSummaries .push( 
'testGetTaxTotalForNonCaliforniaResident: expected ' + expectedTotal + 
'; actual ' + taxTotal 


)3 
}; 





最 后 ， 我 们 用 这 些 新 抽取 出 来 的 函数 改写 getOrderTotal 函数 ， 请 见 例 1-7。 





例 1-7 用 新 抽取 出 来 的 函数 改写 getOrderTotal 函数 


/** 


* 打 过 折 、 加 入 运费 和 税 费 之 后 ， 计 算 订 单 总 价 。 


* 






































@param {Object} customer 一 一 顾客 信息 ， 关 于 下 订单 者 的 一 组 信息 。 








* @param {Array.<0bject>} lineItems 一 一 数组 ， 包 括 所 购 商 品 、 商 品 数 量 及 
每 种 商品 的 单位 运费 。 


可 选择 使 用 的 折扣 码 ， 加 入 运费 和 税 费 之 前 使 用 该 码 。 


* 





* @param {string} discountCode 

* 

/ 

var getOrderTotal = function (customer, lineItems, discountCode) { 

var lineItemTotal = getLineItemTotal(lineItems); 
var shippingTotal = getShippingTotal(lineItems) ; 
var discountTotal = getDiscountTotal(lineItemTotal, discountCode) ; 
var taxTotal = getTaxTotal(lineTtemTotal, customer); 








return LineItemTotal - discountTotal + shippingTotal + taxTotal; 


J; 
分 析 完 上 述 代 码 ， 我 们 观察 到 


。 函数 比 以 前 更 多 了 ， 
。 单元 测试 比 以 前 更 多 了 ， 
。 每 个 函数 实现 一 个 特定 功能 ， 





。 每 个 国 数 都 有 一 个 单元 测试 ; 
。 多 个 国 数组 合 起 来 可 以 实现 更 复杂 的 计算 。 


总 体 来 讲 ， 重 构 之 后 代码 结构 更 加 合理 。getorderTotat 国 数 内 部 计算 各 种 价格 的 代码 被 抽 
取出 来 ， 作 为 一 个 个 单独 的 函数 ， 而 且 每 个 图 数 都 有 相应 的 单元 测试 。 这 意味 着 当代 码 中 
引入 bug 时 ， 更 容易 定位 受 影响 的 功能 。 此 外 ， 如 果 总 税额 或 运费 需要 更 换 计算 方式 ， 而 
现 有 功能 已 经 提供 了 可 用 的 单元 测试 ， 那 么 更 换 之 后 ， 可 方便 地 用 单元 测试 加 以 验证 。 





1.7.2” 重 构 示例 2: 重 构 CSS 的 简单 示例 
例 1-8 的 代码 用 来 展示 网 站 的 标题 栏 


例 1-8 网 站 标题 栏 代码 
<!doctype html> 
<html> 
<head> 
<title>Ferguson's Cat Shelter</title> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head> 
<body> 
<main> 
<h1 style="font-family: Helvetica, Arial, sans-serif;font-size: 36px; 
font-weight: 400;text-align: center;"> 
San Francisco's Premiere Cat Shelter 
</h1> 
</main> 
</body> 
</html> 


打开 浏览 器 ， 加 载 index.html， 将 看 到 如 图 1-3 所 示 的 内 容 。 

















San Francisco's Premiere Cat Shelter 














图 1-3: 网 站 标题 栏 截图 
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在 第 一 个 重 构 示例 中 ， 重 构 之 前 我 们 编写 了 单元 测试 ， 以 保证 重 构 没 有 改变 代码 的 行为 。 
重 构 CSS 时 ， 确 保重 写 代码 没有 改变 展示 效果 同样 重要 。 但 无 法 直接 测试 ， 因 为 重 构 CSS 
带 来 的 是 视觉 上 的 变化 ， 而 不 是 明确 的 数值 上 的 变化 。 第 5 章 将 讨论 保持 视觉 效果 上 的 对 








等 性 所 用 到 的 一 些 技术 。 现 在 ， 在 重 构 前 截图 作为 参考 即 可 。 
重 构 网 站 标题 
































显然 ， 例 1-8 的 代码 还 有 提升 空间 ， 因 为 用 <h1> 标签 表示 的 标题 栏 样式 内 骨 在 style 属 
性 之 中 。 通 过 元 素 的 style 属性 或 将 样式 置 于 <style></style> pr% Z lal, KPERIKA Bl 





HTML 代码 之 中 ， 这 种 样式 叫 作 行内 样式 。 











行内 样式 复 用 性 不 高 ， 这 一 点 非常 类 似 于 例 1-1 重 构 前 、 函 数 体 内 执行 多 种 计算 的 函数 。 
使 用 style 属性 设置 的 样式 ， 只 可 用 于 当前 元 素 。 骨 入 到 <style></style> 标签 中 的 样式 ， 








只 可 用 于 当前 页 。 








因为 大 多 数 网 站 包含 多 个 页 面 ， 并 且 每 个 页 面 都 可 能 有 一 个 标题 栏 ， 所 以 标题 的 样式 应 该 














抽取 出 来 作为 单独 的 CSS 文件 (该 例 中 的 style.css)， 以 用 于 多 个 网 页 ， 并 被 济 





style.css 文件 的 内 容 请 见 例 1-9， 例 1-10 为 抽 掉 行内 CSS 的 HTML 代码 。 


例 1-9 ”将 标题 栏 CSS 抽取 出 来 作为 style.css 文件 
h1 { 
font-family: Helvetica, Arial, sans-serif; 
font-size: 36px; 
font-weight: 400; 
text-align: center; 


} 
11-10 ” 抽 掉 行内 CSS 的 HTML 代码 


<!doctype htmL> 
<html> 
<head> 
<title>Ferguson's Cat Shelter</title> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head> 
<body> 
<main> 
<h1>San Francisco's Premiere Cat Shelter</h1> 
</main> 
</body> 
</html> 








刷新 浏览 器 ， 很 快 就 会 发 现 页 面 显 示 效 果 没 有 变化 ， 我 们 由 此 得 出 以 下 结论 : 

















。 抽取 行内 CSS 可 提升 复 用 性 ，; 
。 分 离 代码 功能 (样式 和 结构 ) 可 增强 代码 可 读 性 ， 








。 回归 测试 可 手动 用 Web 浏览 器 完成 ， 或 通过 比较 重 构 后 的 界面 和 重 构 前 的 截图 














览 器 缓存 。 








将 样式 抽取 出 来 作为 单独 的 文件 ， 可 提升 代码 的 复 用 性 ， 因 为 抽取 出 来 的 样式 可 用 于 多 个 
文件 。 将 CSS 置 于 一 个 独立 于 HTML 代码 的 文件 后 ，HTML 和 CSS 都 更 加 清晰 易 读 ， 因 
为 HTML 中 不 会 包含 元 长 的 样式 定义 ， 并 且 CSS 可 以 按照 符合 逻辑 的 方式 以 声明 块 的 形 
式 组 织 在 一 起 。 最 后 ， 测 试 重 构 是 否 改变 了 页 面 ， 可 和 手动 用 浏览 器 重新 加 载 页 面 ， 与 重 构 
前 的 截图 进行 对 比 。 






































虽然 该 示例 很 简单 ， 但 大 量 类 似 的 小 改动 累积 起 来 ， 效 果 将 十 分 可 观 。 





1.8 ”总结 


1 EA 
通过 本 章 的 学 习 ， 我 们 知道 了 什么 是 重 构 以 及 它 与 软件 架构 之 间 的 关系 。 我 们 还 了 解 了 重 
构 为 什么 重要 ， 以 及 何 时 应 该 重 构 。 最 后 ， 通 过 两 个 重 构 的 例子 了 解 了 单元 测试 。 下 一 章 
介绍 级 联 。 要 编写 CSS， 级 联 是 需要 理解 的 最 重要 的 概念 。 
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第 2 章 


级 联 





可 以 说 没有 比 编写 了 一 大 堆 CSS， 结 果 发 现 生 效 的 不 是 目标 样式 而 是 其 他 样式 更 糟糕 的 
了 。 为 了 更 好 地 理解 发 生 这 种 现象 的 原因 ， 本 章 将 解释 Web 浏览 器 如 何 使 用 级 联 决 定 为 元 
素 应 用 某 种 样式 。 


= + 
2.1 什么 是 级 联 
级 联 是 浏览 器 决定 为 元 素 应 用 哪 种 样式 的 一 种 方法 。 因 为 同一 元 素 可 以 应 用 多 种 样式 ， 所 
以 遇 到 元 素 所 用 样式 与 预期 不 符 时 ， 理 解 级 联 的 工作 原理 很 重要 。 好 在 ， 级 联 并 没有 像 它 
听 起 来 那么 复杂 ; 样式 根据 选择 器 的 特 指 度 以 及 规则 集 出 现 的 次 序 起 作用 。 


` b 
2.2 选择 器 特 指 度 
特 指 度 度量 的 是 CSS 选择 器 识别 元 素 的 精确 性 。 为 选取 元 素 ， 不 同类 型 的 选择 器 常 组 合 在 
一 起 ， 计 算 特 指 度 时 需要 分 析 这 些 选择 器 (除了 通用 选择 器 *)。 为 (8，b，c， d 中 的 各 个 
变量 赋予 相 应 的 数值 ， 就 能 得 到 特 指 度 。 





(1) 如果 用 style 属性 应 用 样式 ， 则 a=1, Ail] a=0。 
(2b 为 ID 选择 器 的 数量 。 

(3) c 为 类 选择 器 、 属 性 选择 器 和 伪 类 的 数量 。 

(4) d 为 类 型 选择 器 和 伪 元 素 的 数量 。 

















以 上 各 





例 2-1 


计算 完成 后 ， 这 些 量 拼 接 起 来 可 得 到 特 指 度 。 为 具体 理解 ， 请 思考 例 2-1 中 的 选 








计算 规则 集 的 特 指 度 


#nav-global > ul > li > a.nav-link { 


} 


color: #000000; 


用 刚刚 定义 的 算法 ， 我 们 可 以 确定 该 选择 器 的 特 指 度 为 (0, 1, 1, 3): 
(1) 样 式 不 是 用 style 属性 添加 的 ， 因 此 a=0 


(2) 只 有 
(3) 只 有 








1 个 ID 选择 器 (#nav-global)， 因 此 b=1 
1 个 类 选择 器 (.nav-link)， 因 此 c=1 








(4) 有 3 个 类 型 选择 器 (ul、ti 和 a)， 因 此 d=3 


比较 选择 器 的 特 指 度 时 ， 最 左 侧 的 选择 器 特 指 度 最 高 。 如 果 最 左 侧 变 量 的 两 个 值 相等 ， 需 
要 比较 右 侧 紧 挨 着 的 变量 的 值 。 举 例 来 说 ， 特 指 度 (1, 0, 0, 0) 高 于 (0, 1, 1, 3)， 同 理 ，(0, 2, 
1, 3) 高 于 (0, 1 ,1, 3)。 然 而 ， 特 指 度 (0, 1, 1, 3) (RF (0, 1, 1, 4) 或 (0, 1,2,0)。 更 多 计算 特 指 









































度 的 例子 请 见 例 2-2。 
例 2-2 特 指 度 计 算 示 例 
/** 
* 该 选择 器 特 指 度 为 (0,0,2,2)， 因 为 它 有 : 
* “0 个 行内 样式 
* 0 个 ID 
* “1 个 类 选择 器 (.title) 、0 个 属性 选择 器 和 1 个 伪 类 选择 器 (:first-child) 
* ”2 个 类 型 选择 器 〈(LL 和 hz2 ) 
*/ 


li:first-child h2 .title {} 


/** 











* 该 选择 器 特 指 度 为 (0,1,2,1)， 因 为 它 有 : 


* 
* 
* 


* 


*/ 





6 个 行内 样式 
1 个 ID (#nav) 

1 个 类 选择 器 (.selected) 、0 个 属性 选择 器 和 1 个 伪 类 选择 器 (:hover ) 
1 个 类 型 选择 器 (a) 








#nav .selected > a:hover {} 


[** 


* 该 选择 器 特 指 度 为 (90,1,2,3)， 因 为 它 有 : 


* 
* 
* 
* 


*/ 





6 个 行内 样式 

1 个 ID (#nav) 

1 个 类 选择 器 (.selected) 、0 个 属性 选择 器 和 1 个 伪 类 选择 器 〈:hover) 
3 个 类 型 选择 器 (html、body 和 a) 








html body #nav .selected > a:hover {} 





2.3 ”规则 集 顺 序 


规则 集 顺序 描述 的 是 一 个 CSS 规则 集 在 样式 表 中 的 位 置 。 如 果 两 个 声明 块 中 的 选择 器 特 指 
度 相 同 ， 且 它们 为 同一 元 素 的 某 个 属性 应 用 样式 ， 那 么 在 样式 表 中 处 于 相对 靠 后 位 置 的 声 
明 块 中 的 属性 优先 级 较 高 。 这 表明 例 2-3 中 的 color 属性 使 用 值 #000000, KA CMAR E 
样式 表 后 面 、 特 指 度 跟前 面相 等 的 声明 块 中 的 颜色 样式 。 


例 2-3 用 后 面 声 明 块 定义 的 色 值 来 为 color 属性 赋值 
<!doctype html> 
<html> 
<head> 
<title>Inline Styles and Specificity</title> 
<style type="text/css"> 
#nav-global > ul > li > a.nav-link { 
color: #FFFFFF; 
} 
#nav-global > ul > li > a.nav-link { 
color: #000000; 





















































</style> 
</head> 
<body> 
<nav id="nav-global"> 


<a href="#" class="nav-link">Link</a> 


24 行内 CSS 和 特 指 度 


除非 用 style 属性 添加 行内 样式 ， 否 则 特 指 度 和 规则 集 顺序 决定 为 元 素 应 用 什么 样式 。 例 
2-4 演示 了 为 锚 点 标签 添加 行内 样式 。 因 为 在 行内 样式 中 为 该 销 点 元 素 设置 了 color 属性 ， 
所 以 将 使 用 该 属性 值 。 不 管 <style> 块 或 外 部 样式 表 中 的 选择 器 有 多 么 精确 ， 它 们 都 比 不 
上 为 元 素 添 加 的 行内 样式 精确 。 



































例 2-4 通过 style 属性 添加 行内 CSS 样式 来 为 color 属性 赋值 
<!doctype html> 
<html> 
<head> 
<title>Inline Styles and Specificity</title> 
<style type="text/css"> 
#nav-global > ul > li > a.nav-link { 
color: #000000; 
} 
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</style> 
</head> 
<body> 
<nav id="nav-global"> 
<ul> 
<li> 


<a href="/" class="nav-link" style="color: #1200FF;">Link</a> 


</li> 
</ul> 
</nav> 
</body> 
</html> 


2.5 用 !important 声 明 覆 盖 级 联 样式 


<style> 抉 或 外 部 样式 表 中 的 样式 ， 如 要 比 其 他 样式 (包括 用 style 属性 添加 的 行内 样式 ) 








更 精确 ， 唯 一 的 方法 是 在 声明 块 中 添加 !important。 这 要 求 浏览 器 














凡是 遇 到 与 给 定 规则 集 


选择 器 相 匹 配 的 元 素 ， 都 应 用 该 声明 块 中 定义 的 样式 ， 而 不 管 具 有 较 高 特 指 度 的 选择 器 所 








定义 的 属性 值 。 若 选择 相同 元 素 的 多 个 声明 块 均 使 用 !important， 
起 作用 。 





则 位 置 最 靠 后 的 声明 块 


例如 ， 在 例 2-5 中 ， 销 点 标签 的 文本 为 白色 (#FFFFFF)， 因 为 第 一 条 规则 集 使 用 了 !important 
声明 。 如 果 两 条 规则 集 都 添加 了 !important， 那 么 锚 点 标签 的 文本 为 黑色 (#6009000)， 因 为 
相对 靠 后 的 规则 集 起 作用 。 如 果 没 有 使 用 !important， 销 点 标签 的 文本 为 蓝 色 (#1200FF), 
因为 行内 样式 特 指 度 最 高 。 注 意 ，!important 不 能 添加 到 行内 样式 style 属性 之 中 (Bll <a 
href="/"style="color: #1200FF !important">Link</a> 这 种 写法 是 错误 的 )。 








例 2-5 在 位 置 相 对 靠 前 的 声明 块 中 添加 !important 来 为 color 属性 赋值 





<!doctype html> 
<html> 
<head> 
<title>Inline Styles and Specificity</title> 
<style type="text/css"> 
#nav-global > ul > li > a.nav-link { 
color: #FFFFFF !important; 


#nav-global > ul > li > a.nav-link { 
color: #000000; 


</style> 
</head> 
<body> 
<nav id="nav-global"> 
<ul> 
<li> 


<a href="/" class="nav-link" style="color: #1200FF; 


</li> 
</ul> 


">Link</a> 
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</nav> 
</body> 
</html> 


2.6 总 结 


扎实 地 理解 级 联 和 特 指 度 的 计算 方法 后 ， 再 去 学 习 更 多 与 重 构 相 关 的 知识 将 会 更 加 容易 ， 
因为 重 构 是 以 这 些 概念 为 基础 的 。 在 后 续 几 童 的 学 习 过 程 中 ， 一定 要 思 萎 对 于 每 个 概念 ， 
级 联 在 其 中 扮演 什么 角色 。 搞 清楚 这 个 问题 之 后 ， 一 切 是 怎么 组 合 在 一 起 的 将 会 更 加 明 
朗 。 下 一 章 ， 我 们 来 了 解 如 何 编 写 更 优秀 的 CSS, 
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编写 更 优质 的 CSS 











关于 编写 CSS 的 “最 佳 实践 ”是 什么 是 颇 有 和 争议 的 。 这 是 因为 实现 一 种 效果 的 方法 有 很 
多 种 ， 单 纯 说 一 种 技术 好 于 另 一 种 可 能 非常 主观 。 然 而 ， 我 们 在 第 1 章 中 已 经 讲 过 ， 优 秀 
的 架构 是 可 预测 、 可 维护 和 可 扩展 的 ， 且 其 能 提升 代码 的 可 复 用 性 。 带 着 对 这 一 定义 的 认 
识 ， 我 们 来 学 习 本 章 中 的 概念 ， 以 便 帮 你 打下 坚实 的 基础 ， 编 写 出 更 优质 的 CSS. 


3.1 使 用 注释 
注释 记录 了 编码 过 程 中 的 重要 内 容 ， 在 我 们 日 后 阅读 代码 时 ， 它 能 起 到 辅助 理解 的 作用 。 
注释 应 该 记录 的 内 容 包 括 : 


。 文件 内 容 

。 选择 器 的 依赖 、 用 法 等 

。 使 用 特定 声明 的 原因 (因为 浏览 器 的 怪癖 而 使 用 时 ， 了 予以 说 明 帮 助 尤其 大 ) 
。 正在 被 重 构 的 、 不 应 该 继续 使 用 的 废弃 样式 


CSS 只 有 块 级 注释 (注释 语句 可 以 折 行 )， 注 释 以 片 开 始 ， 以 汶 结 束 。 若 注释 只 需要 一 行 ， 
仍旧 可 以 用 块 级 注释 ， 但 是 同样 必须 以 上 六 开始 ， 以 沁 结 束 。 下 面 来 看 几 个 注释 的 示例 : 



































/* 
* 主导 航 链接 的 样式 。 


* 





* @see templates/_navigation.html 


*/ 
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.nav-Link { 
padding: 4px; 
text-decoration: none; 


} 


.nav-Link:hover { 
border-bottom: 4px solid #000000; 


/* 
* 防止 因 增 加 了 4px 下 边框 而 导致 元 素 移动 
*/ 

padding-bottom: 0; 

} 





/* @deprecated! */ 


-Navigation-Link { 
color: #1200FF; 
} 


3.2 ”结构 一 致 的 规则 集 





规则 集 可 以 写 到 一 行 ， 也 可 以 分 作 多 行 。 例 3-1 所 示 的 规则 集 只 


行 。 编 写 规则 集 时 ， 花 括号 甚至 可 以 自 成 一 行 ， 如 例 3-3 所 示 。 





例 3-1 只 占 一 行 的 CSS 规则 集 


selector { property1: value; property2: value; property3: 


例 3-2 ”跨越 多 行 的 CSS 规则 集 
selector { 
property1: value; 
property2: value; 
property3: value; 


} 
例 3-3 ”跨越 多 行 的 CSS 规则 集 ， 花 括号 自 成 一 行 
selector 
{ 
property1: value; 
property2: value; 
property3: value; 
} 


47, Pil 3-2 则 分 为 多 


value; } 





编写 规则 集 时 ， 广 意 保持 格式 的 一 致 性 ， 以 使 CSS 可 预测 性 更 强 ， 更 易于 理解 。 








这 当然 与 个 人 偏好 有 关 ， 我 喜欢 将 规则 集 的 每 个 声明 单独 写 到 一 行 ， 如 例 3-2 所 示 。 此 外 ， 








我 还 喜欢 按照 字母 顺序 排列 属性 ， 这 样 CSS 属性 可 预测 性 再 次 加 强 ， 











注 1:“@deprecated”， 表 示 之 前 曾 用 过 该 样式 ， 但 建议 其 他 程序 员 以 后 不 要 再 用 。 











属性 更 易于 查找 。 
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用 浏览 器 引擎 前 缀 组 织 属 性 

浏览 器 引 警 前缀 是 指 浏 览 器 厂商 在 新 的 实验 性 质 的 CSS 属性 实现 标准 化 之 前 ， 预 先 在 属 
性 前 添加 的 字符 串 。 常 见 的 前 组 有 以 下 几 个 : 为 使 用 Blink 或 WebKit 泻 染 引 擎 的 浏览 器 
(Chrome 和 Safari) 添加 的 -webkit-; 为 使 用 Gecko we 5| SENN il bi at (Firefox) 添加 的 
-moz-; 为 使 用 Trident 泻 染 引擎 的 浏览 器 (Internet Explorer/Edge) 添加 的 -ms-。 属 性 标准 
化 之 后 ， 将 不 再 为 其 添加 前 级 。 


























例如 ，transform-origin 就 是 一 个 这 样 的 属性 。 你 可 以 通过 该 属性 修改 元 素 发 生变 换 (LE 
如 旋转 和 平移 ) 的 基点 位 置 。 现 在 我 们 要 想 使 用 该 属性 ， 应 该 用 添加 了 浏览 器 引擎 前 级 的 
写法 ， 把 标准 写法 作为 备用 : 








-ms-transform-origin: @origin; 
-moz-transform-origin: @origin; 
-webkit-transform-origin: @origin; 
transform-origin: @origin; 


这 些 属性 的 顺序 非常 重要 ， 因 为 浏览 器 按照 从 上 到 下 的 顺序 应 用 声明 块 的 属性 ， 它 忽略 无 
法 识别 的 属性 ， 应 用 能 识别 的 属性 。 这 表明 将 没有 前 组 的 标准 CSS 属性 放 到 添加 有 前 组 的 
属性 前 面 ， 可 能 导致 在 两 者 都 支持 的 浏览 器 上 前 者 被 后 者 覆盖 。 




















既 不 支持 新 属性 ， 又 不 支持 带 有 前 组 的 属性 的 老式 浏览 器 ， 会 把 这 两 种 属性 都 忽略 掉 。 只 
支持 带 有 前 绥 的 新 属性 的 老式 浏览 器 ， 将 采用 恰当 的 属性 ， 忽 略 不 带 前 组 的 标准 写法 。 更 
新 一 点 的 浏览 器 ， 为 了 保持 向 后 兼容 ， 继 续 支 持 新 属性 带 有 前 绥 的 写法 ， 同 时 支持 不 带 前 
缀 的 标准 写法 。 对 于 这 种 浏览 器 ， 这 两 种 属性 都 可 以 。 最 后 ， 不 再 支持 属性 带 前 级 写法 ， 
仅 支 持 不 带 前 缀 的 标准 写法 的 浏览 器 ， 将 忽略 带 前 缀 的 属性 ， 应 用 标准 属性 。 
































因为 某 一 特定 浏览 器 的 所 有 用 户 升 级 浏览 器 需要 一 定 的 时 间 ， 所 以 带 有 前 缀 和 不 带 前 绥 的 
写法 都 应 该 保留 到 你 的 网 站 不 再 支持 该 浏览 器 为 止 。 








功能 标记 

带 前 缀 的 CSS 属性 增加 了 维护 成 本 ， 因 为 它们 使 得 样式 表 急 剧 膨胀 。 为 了 弥 
补 这 一 弱点 ， 很 多 浏览 器 厂商 转 而 使 用 选择 性 加 入 (opt-in) 的 功能 ， 以 便 
让 开发 人 员 实 验 最 新 的 CSS 属性 。 如 果 用 户 仍 使 用 老式 浏览 器 访问 你 的 网 
站 ， 你 需要 支持 它们 ， 然 而 ， 你 也 许 还 想 继续 支持 带 前 缀 的 CSS 属性 。 




















3.3 ”保持 选择 器 的 简单 


将 多 种 不 同 的 选择 器 和 结合 符 写 到 一 起 形成 的 选择 器 非常 复杂 。 然 而 ， 选 择 器 能 够 做 到 非 
常 精确 ， 并 不 意味 着 它们 就 应 该 很 精确 ， 比 如 例 3-4。 
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例 3-4 用 于 选择 某 一 特定 元 素 的 CSS 选择 器 
<!doctype html> 
<html> 
<head> 
<title>Keep Selectors Simple</title> 
<style type="text/css"> 
div > nav > ul > li >a { 
color: #1200FF; 
} 
</style> 
</head> 
<body> 
<div> 
<nav> 
<ul> 
<li> 
<a href="./policies.html">Policies</a> 
</li> 
</ul> 
</nav> 
</div> 
</body> 
</html> 


例 3-4 的 代码 使 用 了 多 个 子 选择 器 (>) 为 一 个 特定 锚 点 标签 添加 样式 。 用 该 方法 为 锚 点 标 
签 元 素 添 加 样式 不 太 好 ， 因 为 所 用 的 选择 器 高 度 依赖 页 面 的 HTML 结构 。 一 旦 HTML 结 
构 改变 ， 目 标 样 式 将 不 起 作用 。 因 此 更 佳 的 做 法 是 为 HTML 元 素 增加 一 个 类 ， 并 为 该 类 增 
加 样式 ， 详 见 例 3-5。 





























例 3-5 ”增加 类 后 的 HTML 结构 
<!doctype html> 
<html> 
<head> 
<title>Keep Selectors Simple</title> 
<style type="text/css"> 
a.nav-Link { 
color: #1200FF; 
} 
</style> 
</head> 
<body> 
<div> 
<nav> 
<ul> 
<li> 
<a href="./policies.html" class="nav-link">Polictes</a> 
</li> 
</ul> 
</nav> 
</div> 
</body> 
</html> 





例 3-5 中 所 有 复杂 的 子 选择 器 均 已 删除 ， 用 类 选择 器 选择 类 为 nav-Link 的 元 素 。 然 而 ， 选 
择 器 a.nav-Link 仍然 比 实际 需要 的 更 加 精确 ， 我 们 将 其 称 为 精确 过 头 的 选择 器 ， 因 为 只 能 
用 其 选择 销 点 标签 。 


如 例 3-6 所 示 ， 该 选择 器 还 可 以 进一步 简化 。 





























例 3-6 简化 过 的 选择 器 
.nav-Link { 
color: #1200FF; 
} 


如 上 所 示 ， 尽 可 能 地 简化 选择 器 有 很 多 优势 ， 因 为 样式 不 再 依赖 于 页 面 的 HIML 结构 ， 
CSS 文件 也 会 略微 缩小 。 假 如 元 素 应 该 使 用 不 同 于 例 3-6 中 所 用 的 样式 ， 只 要 与 父 容器 一 
起 更 换 即 可 (例如 : .parent-container .nav-link{ color: #FF0000; }) ， 这 不 仅 为 元 素 应 
用 了 其 他 样式 ， 还 为 该 样式 的 使 用 场景 提供 了 背景 信息 。 


然而 ， 有 时 使 用 精确 的 选择 器 确实 合理 一 一 例如 ， 为 某 一 元 素 添 加 一 个 类 ， 实 现 有 别 于 将 
该 类 应 用 于 其 他 元 素 时 得 到 的 样式 。 


在 例 3-7 中 ，error 类 为 文本 应 用 红色 样式 。 为 输入 框 增加 error 类 样式 时 ， 浏 览 器 也 许 会 
为 文本 和 文本 框 应 用 红色 样式 ， 而 不 改动 其 他 使 用 error 类 的 元 素 的 样式 。input.error 的 
精确 程度 足以 为 输入 框 元 素 的 文本 和 边框 颜色 增加 样式 ， 因 此 它 被 认为 是 与 精确 过 头 的 选 
择 器 相对 的 合格 的 选择 器 。 


例 3-7 可 接受 的 合格 选择 器 
.error { 
color: #FF0000; 
} 
































input.error { 
border-color: #FF0000; 


} 


高 性 能 选择 器 

简单 的 选择 器 比 起 复杂 的 选择 器 性 能 更 高 ， 然 而 ， 随 着 计算 机 性 能 的 持续 提升 和 浏览 器 的 
持续 优化 ， 大 多 数 时 候 我 们 都 不 用 过 于 担心 选择 器 的 性 能 。 当 然 ， 还 是 应 该 优先 选用 简单 
的 选择 器 ， 这 是 因为 简单 的 选择 器 复 用 程度 高 ， 易 于 理解 ， 而 并 不 是 因为 它们 更 高 效 ， 虽 
然 这 一 点 显而易见 。 遵 循 本 书 的 指南 ， 你 不 必 陷 入 对 选择 器 性 能 的 处 慌 ， 但 是 对 选择 器 性 
能 有 个 整体 认识 仍然 很 有 必要 。 

1. 从 右 向 左 匹配 选择 器 

Web 浏览 器 需要 快速 选择 并 为 元 素 应 用 样式 ， 以 便 尽快 为 用 户 提供 可 用 的 网 页 。 浏 览 器 
从 右 向 左 匹配 选择 器 ， 因 此 它 能 够 忽略 前 面 不 匹配 的 元 素 ， 而 不 必 把 时 间 浪 费 到 确认 元 素 
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是 否 匹 配 上 。 我 们 结合 例 3-8 来 理解 此 概念 ， 该 段 代 码 中 包含 类 .nav-Link 和 一 个 strong 
元 素 。 


例 3-8 一 段 层 级 结构 简单 的 HTML 代码 
<!doctype htmL> 
<html> 
<head> 
<title>Another Example</title> 
</head> 
<body> 
<div> 
<nav> 
<ul> 
<li> 
<strong>Not a Link</strong> 
</li> 
</ul> 
</nav> 
</div> 
<div> 
<nav> 
<ul> 
<li> 
<a href="#" class="nav-link">Link</a> 
</li> 
</ul> 
</nav> 
</div> 
</body> 
</html> 


如 果 用 div > nav > ul >li > a 选择 销 点 标签 ,并且 浏览 器 尝试 从 左 向 右 匹 配 元 素 (排除 
<!doctype>) ， 它 需要 执行 下 列 步 又 。 


(1) 遍历 每 个 元 素 ， 检 查 它 是 否 是 <div> 元 素 。 

(2) 检查 步骤 1 匹配 到 的 每 个 <div> 元 素 ， 确 认 它 是 否 有 子 节 点 <nav>。 
(3) 检查 步骤 2 匹配 到 的 每 个 <nav> 元 素 ， 确 认 它 是 否 有 子 节 点 <ul>。 
(4) 检查 步骤 3 匹配 到 的 每 个 <ul> 元 素 ， 确 认 它 是 否 有 子 节 点 <li>, 
(5) 检查 步骤 4 匹配 到 的 每 个 <li 元 素 ， 确 认 它 是 否 有 子 闻 点 <a>。 
(6) 为 找到 的 那 一 个 <a> 元 素 应 用 样式 。 


有 反 过 来 讲 ， 如 果 同 一 选择 器 (div > nav > ul > li > a) 从 右 向 左 匹 配 ， 浏 览 器 需要 执行 
下 列 步骤 。 


(1) 遍历 每 个 元 素 ， 检 查 它 是 否 是 <a> 元 素 。 
(2) 检查 步骤 1 匹配 到 的 每 个 <a> 元 素 ， 确 认 它 是 否 有 一 个 <li> Io 
(3) 检查 步骤 2 匹配 到 的 每 个 <li 元 素 ， 确 认 它 是 否 有 一 个 <ul> 父 市 点 。 
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(4) 检查 步骤 3 匹配 到 的 每 个 <ul> 元 素 ， 确 认 它 是 否 有 一 个 <nav> I A. 
(5) 检查 步骤 4 匹配 到 的 每 个 <nav> 元 素 ， 确 认 它 是 否 有 一 个 <div> 父 市 点 。 
(6) 为 与 选择 器 相 匹配 的 <a> 元 素 应 用 样式 .。 


虽然 这 两 种 顺序 步骤 数 相同 ， 但 存在 较 大 的 区 别 : 从 左 向 右 匹配 时 ， 两 个 <div> 元 素 都 需 
要 匹配 一 遍 。 而 从 右 向 左 匹 配 时 ， 浏 览 器 能 够 直接 排除 不 包含 销 点 标签 的 整个 <div>, 
要 进一步 提升 性 能 ， 还 可 以 用 .nav-Link 类 选择 锚 点 标签 ， 那 么 浏览 器 只 需要 遍历 每 个 元 
素 ， 检 查 它 是 否 包含 该 类 。 


对 浏览 器 如 何 解析 选择 器 有 了 以 上 大 致 的 理解 之 后 ， 我 们 来 分 析 一 个 更 加 极端 (很 容易 避 
免 ) 的 例子 。 


2. 关键 选择 器 

例 3-9 中 的 选择 器 ， 选 择 的 是 祖先 元 素 为 <body> 标签 的 任意 元 素 。 从 右 向 左 解析 该 选择 
器 ， 能 够 选择 页 面 的 每 个 元 素 ， 并 向 上 回 漳 查 看 它 是 否 有 个 <body> 祖先 元 素 。 该 选择 器 效 
率 极 低 ， 因 为 几乎 每 个 可 见 元 素 都 是 <body> 元 素 的 后 代 。 


例 3-9 以 body 为 祖先 元 素 的 通用 选择 絮 

body * { 

font-size: 12px; 

} 
正如 前 面 讲 过 的 ， 浏 览 器 从 右 向 左 匹配 元 素 ， 因 此 它 能 够 及 时 排除 与 选择 器 不 匹配 的 元 
素 。 选 择 器 最 右边 的 部 分 叫 作 关键 选择 器 ， 例 3-9 是 以 通用 选择 器 * 作为 关键 选择 器 的 。 


单独 使 用 通用 选择 器 为 所 有 元 素 (* {} ) 应 用 样式 ， 浏 览 器 可 以 很 快 完成 泻 染 工作 ， 因 为 
它 只 需要 匹配 页 面 的 每 个 元 素 。 然 而 ， 当 通用 选择 器 与 男 一 个 选择 器 和 结合 符 ( 例 3-9 中 
的 祖先 选择 器 ) 配合 使 用 时 ， 浏 览 器 匹配 合适 的 元 素 所 做 的 工作 要 更 多 。 只 使 用 通用 选择 
器 ， 不 要 将 其 与 结合 符 和 其 他 选择 器 配合 使 用 可 以 解决 该 问题 。 







































































3.4 分离 CSS 和 JavaScript 


由 于 JavaScript 和 CSS 两 者 都 依赖 于 HTML 元 素 的 类 和 ID， 因 此 它们 可 能 会 混杂 在 一 起 。 
此 外 ， 因 为 JavaScript 能 够 修改 HTML 元 素 的 样式 ， 所 以 这 两 种 语言 的 职责 可 能 会 变 得 很 
混乱 。 为 了 区 分 CSS 和 JavaScript 的 职能 ，JavaScript 中 用 来 选择 元 素 的 类 和 ID， 不 应 该 
再 用 来 为 元 素 添 加 样式 。 类 似 地 ， 用 JavaScript 修改 元 素 样 式 时 ， 应 该 通过 增加 和 删除 类 
来 实现 。 


3.4.1 ”在 JavaScript 中 使 用 带 前 级 的 类 和 ID 
HTML 中 的 类 既 用 来 为 元 素 添加 CSS 样式 ， 又 在 JavaScript 用 作 选 择 器 ， 这 种 情况 很 常 
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见 。 同 样 很 常见 的 是 ， 添 加 到 元 素 中 的 类 和 JID 只 用 于 选择 元 素 ， 而 不 是 为 元 素 添加 样 
式 。HTML 中 的 类 和 JIJD， 若 未 在 CSS 中 使 用 ， 这 将 使 得 我 们 难以 找到 能 够 修改 元 素 样式 
的 CSS。 类 似 地 ， 如 果 为 了 让 类 名 更 切合 它 所 作用 的 元 素 而 修改 了 类 名 ， 却 没有 同步 修改 
JavaScript 中 的 类 名 ，JavaScript 代码 将 不 起 作用 。 














比较 简单 的 修改 方法 是 ， 在 只 用 于 JavaScript 的 类 和 ID 前 添加 js-。 例 如 ， 如 果 我 们 要 在 
JavaScript 中 选择 与 政策 相关 的 一 组 选项 卡 ， 那 么 可 以 用 js-tab-group-policies 作为 ID。 
只 用 添加 了 js- 前 组 的 类 和 ID 作为 JavaScript 选择 器 ， 就 可 以 消除 JavaScript 和 CSS 之 间 
的 依赖 关系 。 


3.4.2 用 类 修改 元 素 样式 

元 素 样式 可 以 用 JavaScript 修改 ， 很 多 库 (f jQuery) 简化 了 具体 的 实现 方法 。 然 而 ， 用 
JavaScript 修改 样式 通常 表示 用 style 属性 为 元 素 增加 行内 样式 ， 这 将 使 得 行内 样式 最 精 
确 。 此 外 ， 在 JavaScript 中 修改 样式 ， 表 示 JavaScript 要 为 特定 的 CSS 样式 负责 ， 这 超出 
了 它 的 职责 范围 。 如 遇 到 元 素 样 式 需 要 改动 的 情况 ， 则 不 仅 要 在 CSS 文件 中 查找 现 有 样 
式 ， 还 要 在 JavaScript 文件 中 查找 。 


因此 ， 若 要 修改 HTML 元 素 样式 ， 不 要 用 JavaScript 添加 style 属性 ， 而 是 应 该 为 元 素 增 
加 或 删除 类 。 这 样 不 仅 可 以 应 用 合适 的 样式 ， 该 元 素 的 CSS 样式 集 也 能 跟 其 余 的 网 站 CSS 
合理 地 组 织 在 一 起 。 


3.5 ”使 用 类 


用 类 和 I 识别 DOM 中 的 元 素 ， 为 其 应 用 特定 样式 很 方便 。 每 个 网 页 中 ， 类 可 以 根据 需要 
复 用 多 次 ， 并 且 它 们 的 特 指 度 很 低 ， 因 此 可 以 方便 地 覆盖 。 而 ID 几乎 正好 与 此 相反 ， 它 
们 的 特 指 度 很 高 ， 因 此 无 法 轻易 覆盖 ， 并 且 同 一 个 网 页 中 每 个 ID 最 多 只 能 用 一 次 。 对 于 
持续 变化 的 网 站 ， 在 为 其 编写 CSS 时 ， 应 该 用 类 为 元 素 增加 样式 。 






























































跟 其 他 很 多 问题 一 样 ， 对 于 是 否 只 应 该 使 用 类 ， 前 端 开 发 人 员 持 有 不 同 的 意见 。 他 们 反对 
只 使 用 类 的 一 个 原因 是 ID 不 仅 合法 ， 还 有 助 于 保证 HTML 结构 体 只 被 使 用 一 次 。 例 如 ， 
如 果 网 站 的 一 个 页 面 要 实现 两 栏 的 效果 ， 甚 中 一 栏 为 侧 边栏 ， 另 一 栏 放置 页 面 主要 内 容 ， 
那么 我 们 可 以 用 下 面 的 选择 器 : 












































#content { 
/* # 内 容 区 域 的 样式 写 到 这 里 */ 
} 





#sidebar { 
/* # 侧 边栏 的 样式 写 到 这 里 */ 
} 























ID 的 使 用 表明 这 些 元 素 最 多 只 能 在 页 面 中 用 一 次 。 然 而 ， 如 果 日 后 想 修改 网 页 ， 再 增加 一 
道 侧 边栏 ， 将 内 容 置 于 两 道 侧 边栏 之 间 ， 又 该 怎么 做 呢 ? 第 二 道 侧 边栏 就 需要 用 新 的 ID 
或 类 为 其 添加 新 的 CSS， 或 将 #sidebar 改 为 类 ， 重 用 其 样式 .。 


使 用 独一无二 的 ID 更 具 优 势 的 元 素 ， 通 过 使 用 单独 的 类 也 能 实现 相同 的 目标 。 如 果 日 后 
该 样式 需要 复 用 ， 不 用 修改 直接 用 即 可 。 从 实际 应 用 来 看 ， 大 多 数 情况 下 ， 类 和 卫 在 
CSS 性 能 方面 没有 明显 的 差别 。 
































在 JavaScript 中 ， 选 择 元 素 的 最 快 方式 是 DD。 不 使 用 了 D 为 元 素 增 加 样式 ， 
是 将 CSS 和 JavaScript 分 离 的 另外 一 个 好 方法 ， 该 方法 非常 类 似 于 为 类 和 ID 
增加 js- 前 级 。 





3.6 ”类 名 要 有 意义 


有 意义 的 类 名 通过 描述 为 什么 元 素 增加 样式 ， 从 而 提供 恰如其分 的 背景 信息 。 这 样 既 可 以 
防止 因 细 市 过 少 而 表意 模糊 ， 又 可 以 避免 因 信 息 过 多 而 妨碍 代码 重用 。 


例 3-10 演示 的 是 用 类 选择 元 素 ， 但 是 a 是 什么 ? 含义 模糊 的 类 名 会 令 人 费解 。 也 许 .a 用 
来 表示 “animal”( 动 物 )。 若 确实 如 此 ， 用 animal 则 更 贴切 ， 因 为 这 样 可 以 清楚 表达 它 
所 代表 的 元 素 。 


例 3-10 类 名 模糊 的 声明 块 

-a{ 

adi 200px; 

} 
然而 ， 虽 然 将 类 名 表意 清楚 很 重要 ， 但 同样 重要 的 是 不 要 做 过 头 。 如 果 不 用 animal 作为 类 
名 ， 而 是 用 female-black-and-white-kitten (雌性 一 黑 一 和 一 白 一 小 猪 ) 又 将 如 何 ?” 从 技 
术 上 来 讲 ， 新 类 名 可 以 重用 ， 但 是 它 过 于 精确 ， 因 为 其 他 动物 也 许 会 用 同一 样式 来 显示 ， 
那么 该 类 名 就 不 能 准确 表述 它 所 应 用 于 的 动物 。 相 比 之 下 ， 类 名 animal 则 更 加 贴切 ， 因 
为 它 能 表达 清楚 意思 ， 看 到 它 很 容易 理解 为 什么 元 素 增加 样式 。 它 还 具有 一 定 的 概括 性 ， 
能 够 表达 应 该 应 用 该 样式 的 任何 类 型 动物 ， 不 论 峻 雄 、 老 幼 ， 或 者 是 否 是 猫 。 


避免 使 用 过 于 模块 化 的 类 
有 意义 的 类 名 ， 摘 述 的 是 应 用 样式 的 元 素 ， 而 不 是 为 元 素 应 用 的 样式 。 你 是 否 见 过 类 似 例 
3-11 这 样 的 HTML ? 
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例 3-11 过 于 模块 化 的 类 
<h1 class="font-bold uppercase blue-text margin-bottom-large no-padding"> 
Too Many CSS Classes 
</h1> 


这 些 类 描述 的 是 怎样 为 元 素 增加 样式 ， 而 不 是 为 什么 元 素 增加 样式 。 此 外 ， 这 些 类 存在 过 
于 模块 化 问题 一 一 因为 每 个 类 应 用 一 种 样式 ， 它 们 总 是 需要 一 起 使 用 。 应 该 避免 使 用 过 于 
模块 化 的 类 ， 因 为 它们 并 不 比 行内 样式 更 好 ， 如 例 3-12 所 示 。 


例 3-12 行内 CSS 
<h2 style="font-weight: bold; text-transform: uppercase; color: #1200FF; 
margin-bottom: 20px; padding: 0"> 
Too Many CSS Classes 
</h2> 























这 些 样 式 应 该 放 到 一 起 ， 使 用 表意 明确 、 能 够 描述 为 什么 元 素 增 加 样式 的 类 名 ， 请 见 例 
3-13。 按 照 该 方式 重 构 之 后 ，HTML 可 读 性 更 强 ， 因 为 它 使 用 了 非常 简洁 的 类 名 ， 如 例 
3-14 所 示 。 


例 3-13 描述 为 什么 元 素 增加 样式 的 类 
.section-title { 
color: #1200FF; 
font-weight: bold; 
margin-bottom: 20px; 
padding: 0; 
text-transform: uppercase; 


} 
例 3-14 将 过 于 模块 化 的 类 组 织 在 一 起 的 类 


<h2 class="section-title"> 
Too Many CSS Classes 
</h2> 


3.7 ”创建 更 好 的 盒子 


盒子 模型 是 浏览 器 决定 如 何 渲染 矩形 的 方法 。 理 解 盒子 模型 的 工作 原理 很 重要 ， 因 为 所 有 
的 HTML 元 素 本 质 上 都 是 盒子 ， 只 有 掌握 其 原理 ， 才 能 将 各 元 素 合 理 地 组 织 在 一 起 。 


图 3-1 展示 了 一 个 具有 固定 宽 、 高 、 内 边 距 (padding)、 外 边 距 (margin) 和 边框 (外 边 
距 和 内 边 距 使 用 了 极 具 区 分 度 的 颜色 ， 很 直观 ) 的 元 素 。 该 盒子 可 用 例 3-15 中 的 代码 
生成 。 



























































width: 150px 
height: 150px 


padding: 10px 


border: 5px 


margin: 5px 











根据 为 元 素 的 box-sizing 属性 赋 的 值 ， 盒 子 尺寸 的 计算 方式 有 两 种 。 在 下 
外 边 距 都 将 影响 盒子 周边 的 空间 ， 但 是 计算 盒子 的 尺寸 时 ， 不 需要 考虑 外 边 距 。 


图 3-1: 具有 固定 高 、 宽 、 内 边 距 、 外 边 距 和 边框 的 元 素 


图 3-1 所 示 盒 子 的 代码 


<!doctype html> 
<html> 
<head> 


<title>Determining Dimensions with the Box Model</title> 
<style type="text/css"> 
.example-element { 
background-color: #FF0000; 
border: 5px solid #000000; 
display: block; 
height: 150px; 
Margin: 5px; 
padding: 10px; 
width: 150px; 
} 
</style> 


</head> 
<body> 


<div class="example-element"></div> 


</body> 
</html> 
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3.7.1 盒子 尺寸 : content-box 

车 将 content-box jit 24 box-sizing 属性 ， 在 计算 盒子 的 尺寸 时 ， 需 要 为 元 素 的 高 度 
和 宽度 增加 内 边 距 和 边框 。 例 如 ， 如 果 按 照 这 种 方式 计算 图 3-1 盒子 的 尺寸 ， 则 为 
180px x 180px， 因 为 : 





150px 高 度 
10px padding-top 
10px padding-bottom 
5px border-top 
5px border-bottom = 180px 计算 后 得 到 的 高 度 


+ 十 十 十 


150px 宽度 
10px padding-left 
10px padding-right 
5px border-left 
5px border-right = 180px 计算 后 得 到 的 宽度 


+ +++ 


3.7.2 FR}: border-box 


若 将 border-box 赋 给 box-sizing 属性 ， 盒 子 的 尺寸 只 跟 盒 子 的 宽度 和 高 度 属 性 相关 。 这 
表明 尽管 图 3-1 为 盒子 定义 了 内 边 距 和 边框 样式 ， 盒 子 的 大 小 仍 为 150px 高 、150px 宽 ， 
因为 这 就 是 为 高 度 和 宽度 属性 设置 的 值 。 浏 览 器 会 考虑 内 边 距 和 边框 ， 合 理 调整 高 度 和 宽 
度 属 性 ， 因 此 总 尺寸 等 于 为 高 度 和 宽度 属性 设置 的 值 。 在 这 种 情况 下 : 

150px 计算 后 得 到 的 高 度 

10px padding-top 

10px padding-bottom 


5px border-top 
5px border-bottom = 120px 剔除 内 边 距 和 边框 ， 盒 子 的 隐 性 高 度 


























150px 计算 后 得 到 的 宽度 
10px padding-left 
10px padding-right 
5px border-left 
5px border-right = 120px 剔除 内 边 距 和 边框 ， 盒 子 的 隐 性 





SH 
Rẹ 


3.7.3 content-boxe{border-box 

因为 盒子 尺寸 有 两 种 不 同 的 计算 方法 ， 所 以 应 该 考虑 其 使 用 场景 。content-box 和 border- 
box 两 者 没有 优 劣 之 分 ， 但 是 很 多 人 发 现 border-box 更 直观 ， 因 为 它 描述 的 是 包括 边框 在 
内 的 元 素 的 高 度 和 宽度 ， 而 不 只 是 内 容 区 域 的 尺寸 。 

任何 元 素 都 可 以 设置 box-sizing 属性 ， 因 此 可 以 混用 这 两 种 盒子 ， 但 是 为 了 保持 一 致 性 ， 通 
常 选 用 其 中 一 种 并 坚持 使 用 。 具 体 设 置 方法 是 ， 用 通用 选择 器 进行 设置 ， 指 定 盒子 的 类 型 ， 




















an 
*:after, 
*:before { 
box-sizing: border-box; 


} 


3.8 总 结 

本 章 所 讲 概念 为 我 们 进行 重 构 打 下 了 另 一 个 基础 。 重 构 之 前 ， 理 解 如 何 编写 更 优质 的 CSS, 
将 会 使 得 重 构 更 加 容易 。 下 一 章 ， 我 们 将 探索 样式 的 不 同 用 途 及 其 对 代码 复 用 有 何 帮 助 。 
学 习 下 一 章 时 ， 不 要 忘记 本 章 内 容 ， 因 为 灵活 运用 所 学 知识 可 极 大 地 简化 CSS 代码 。 
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第 4 章 


为 样式 分 类 





代码 复 用 是 优秀 架构 的 一 项 基本 原则 ， 可 以 说 它 是 编写 高 质量 CSS 代码 所 要 重点 考虑 的 原 
则 之 一 。 本 章 讨论 的 是 ， 以 符合 逻辑 、 深 思 熟 虑 的 方式 作用 于 HTML 元 素 的 不 同样 式 ， 在 
用 途上 有 哪些 细微 差别 。 按 照样 式 的 功能 对 其 进行 分 类 和 使 用 ， 代 码 的 复 用 方式 就 会 变 得 
更 加 明显 。 学 习 本 章 过 程 中 ， 请 回顾 第 2 章 所 讲 内 容 ， 你 会 发 现 为 样式 分 类 跟 级 联 样式 之 
间 的 关系 。 


41 样式 分 类 的 重要 性 

简单 来 说 ， 网 站 是 一 组 用 来 展示 信息 的 文档 。 然 而 ， 往 复杂 处 说 ， 最 复杂 的 网 站 很 像 一 个 
功能 多 种 多 样 的 应 用 ， 帮 助 实现 简单 的 人 机 交互 和 复杂 的 操作 。 这 两 种 极端 ， 都 使 用 语义 
化 HTML 标签 描述 网 站 所 展示 的 内 容 ， 不 同 复杂 程度 的 网 站 ， 都 可 以 从 按 用 途 定 义 样 式 的 
方法 中 受益 。 














按 用 途 定义 样式 ， 有 助 于 创建 更 优秀 的 架构 ， 因 为 将 样式 组 织 成 为 不 同 的 类 别 ， 促 使 代码 
可 预测 性 更 强 、 更 易于 复 用 。 接 下 来 所 介绍 的 多 种 样式 分 类 方法 尽管 很 复杂 ， 却 适用 于 任 
何 网 站 。 


4.2 通用 样式 


浏览 器 自 带 的 默认 样式 表 叫 作 浏 览 器 默认 样式 ， 它 可 为 HTML 元 素 应 用 默认 的 样式 。 因 为 
不 同 厂商 开发 的 浏览 器 不 同 ， 所 以 其 默认 样式 表 的 某 些 属性 和 属性 值 可 能 有 所 差异 。 
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通用 样式 是 指 为 各 种 元 素 的 属性 设置 默认 值 的 样式 ， 


























否则 不 同 的 浏览 器 将 为 其 应 用 不 同 的 





样式 。 例 如 ， 例 4-1 规范 了 <hr> 元 素 在 不 同 浏 览 嚣 中 的 样式 。 


例 4-1 规范 <hr> 元素 在 不 同 浏 览 颖 中 的 样式 
/** 
* 1. 增加 在 Firefox 浏 览 器 中 应 用 的 盒子 尺寸 类 型 。 
* 2. fEEdgeFIEDI Kt at, Abate EBS 
*/ 

















hr { 
box-sizing: content-box; /* 1 */ 
height: 0; /* 1 */ 
overflow: visible; /* 2 */ 


} 


RANC RII bk ee BRA Bi PE AT EERE, (ESRI Wc Web 开发 社区 已 经 为 我 们 做 





























了 大 量 工作 ， 因 此 有 多 种 开源 的 通用 样式 可 供 选 择 。 








最 通用 的 样式 表 是 Nicolas Gallagher 





和 Jonathan Neal 开发 的 normalize.css ( 例 4-1 中 的 CSS 即 摘自 该 文件 )。 你 可 以 从 GitHub 
(http:/necolas.github.io/normalize.css) 下 载 ， 附 录 也 附 了 一 份 。 


开源 通用 样式 表 中 的 很 多 样式 ， 它 们 的 最 大 用 途 体现 在 解决 传统 浏览 器 的 兼容 问题 方面 ， 





因此 你 的 项 目 很 可 能 没 必 要 使 用 它们 (取决 于 项 目 所 支持 的 浏览 器 )。 你 可 能 也 会 发 现 其 




















中 包含 大 量 你 用 不 到 的 元 素 的 样式 ， 比 如 <audio>、<canvas> 和 <kbd> 等 。 如 果 你 不 打算 











使 用 这 些 元 素 ， 为 了 使 CSS 文件 缩小 ， 应 该 考虑 将 其 








4.3 基础 样式 





删除 。 


基础 样式 旨 在 为 设置 更 加 细致 的 样式 提供 基础 。 基 础 样式 很 容易 识别 ， 因 为 它们 用 单 类 型 
选择 器 ， 或 结合 使 用 非常 简单 的 类 型 选择 器 和 结合 符 〈 例 如 ， 用 ul ul 在 无 序列 表 中 选择 
无 序列 表 )， 或 使 用 任何 伪 类 为 HTML 元 素 添加 样式 。 跟 通用 样式 一 样 ， 基 础 样式 是 最 不 











精确 的 样式 ， 应 被 置 于 样式 表 中 。 




















一 旦 为 HTML 元 素 设 置 基础 样式 后 ， 应 该 不 需要 重新 声明 ， 除 非 设置 的 基础 样式 不 适合 另 


一 目标 场景 。 编 写 基础 样式 所 要 遵循 的 基本 原则 是 : 
时 ， 不 需要 重 写 大 量 基础 样式 就 能 实现 设计 目标 。 











4.3.1 定义 基础 样式 

















为 元 素 应 用 基础 样式 之 外 的 其 他 样式 





下 面 是 如 何 为 不 同类 型 常用 元 素 定 义 基础 样式 的 一 些 建 议 。 其 中 多 个 属性 ， 通 常 在 浏览 器 
样式 表 中 有 所 设置 ， 但 其 属性 值 也 许 不 适合 所 有 设计 目标 ， 并 且 随 着 浏览 器 发 布 新 版 本 ， 











这 些 值 可 能 会 发 生变 化 。 为 元 素 定 义 基础 样式 之 前 ， 
并 以 此 作为 定义 样式 的 指导 。 





可 以 思考 一 下 样式 的 主要 应 用 场景 ， 
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基础 样式 应 该 只 为 最 笼统 的 使 用 场景 设置 属性 和 属性 值 。 通 和 常 我 们 为 元 素 设置 以 下 基础 
属性 : 


e color 

e font-family 

e font-size 

e font-weight 

e letter-spacing 
e line-height 

e margin 


e padding 


如 有 果 你 的 网 站 本 质 上 是 信息 类 网 站 ， 用 好 这 些 样式 可 能 就 足够 了 。 然 而 ， 如 果 你 搭建 的 是 
设计 非常 复杂 的 应 用 类 网 站 ， 那 么 这 些 样式 只 能 满足 初级 需求 。 正 如 本 章 后 面 所 讲 ， 对 于 
可 复 用 的 组 件 ， 也 许 需要 更 复杂 的 样式 。 


你 在 编写 基础 样式 时 ， 需 考虑 上 面 列 出 的 这 些 属性 ， 但 并 不 是 任何 时 候 都 要 全 部 设置 ， 因 
为 它们 都 继承 自 祖先 元 素 (除了 margin 和 padding)。 如 果 margin 和 padding 应 该 使 用 继 
承 来 的 属性 值 ， 则 用 inherit 作为 属性 值 。 对 于 某 种 特定 类 型 的 元 素 ， 应 该 纳入 基础 样式 
的 其 他 属性 或 伪 类 ， 这 个 在 下 面 几 节 将 会 介绍 。 






































利用 继承 

对 于 color, font-family, font-size, font-weight, letter-spacing FH line- 
height 属性 ， 子 元 素 继承 自 父 元 素 ， 因 此 子 元 素 的 属性 值 不 总 是 需要 设置 。 关 
于 这 些 CSS 属性 值 是 否 继承 的 完整 列表 ， 请 见 ttps://www.w3.org/TR/CSS21/ 
propidx.html。 需 要 指定 样式 的 完整 HTML 元 素 列 表 ， 请 见 https://www.w3.org/ 
TR/html-markup/elements.html, 
































4.3.2 ”文档 元 数据 元 素 
ee i 包括 <head>, <title>, <base>, <link> 和 <meta>。 因 为 它们 不 可 见 ， 故 
能 为 其 添加 样式 。 




















43.3 区 块 元 素 


区 块 元 素 包 括 <address>, <article>, <aside>, <body>, <footer>, <header>, <nav> 和 <section>, 


该 类 元 素 通 常 包 含 其 他 元 素 ， 它 们 组 成 了 HTML 文档 的 各 种 区 域 。 
考虑 一 下 为 区 块 元 素 设 置 以 下 属性 : 
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e color 

e font-family 

e font-size 

e font-weight 

e letter-spacing 
e line-height 

e padding 


<body> 元 素 也 许 还 需要 设置 背景 色 background 属 


础 样式 。 











PE, fil 4-2 展示 了 如 何 为 区 块 元 素 应 用 基 





a 


例 4-2 ”为 区 块 元 素 设 置 基础 样式 


body { 
background: #FFFFFF; 
color: #333333; 


font-family: Helvetica, Arial, sans-serif; 


font-size: 14px; 

line-height: 1.3; 

padding: 5% 20%; 
} 


article, 

footer, 

header, 

nav { 
padding: 0; 

} 


article, 

nav { 
margin-bottom: 12px; 
margin-top: 12px; 


} 


footer { 
margin-top: 12px; 
} 


header { 


margin-bottom: 12px; 


} 


4.3.4 ”标题 和 文本 


元 素 


标题 元 素 包 括 <h1> 一 <h6> 六 级 标题 ， 用 于 定义 HTML 文档 每 个 区 域 的 标题 。 文 本 元 素 包 
括 <figure>, <figcaption>, <p> 和 <pre>， 用 来 展示 块 状 文本 。 


为 标题 和 文本 元 素 定义 基础 样式 时 ， 需 性 虑 以 下 属性 : 
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e font-family 

e font-size 

e font-weight 

e letter-spacing 
e line-height 

e margin-bottom 


e margin-top 





例 4-3 展示 了 如 何 为 标题 和 文本 元 素 定 义 基 础 样式 。 
例 4-3 标题 和 文本 元 素 的 基础 样式 


h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
font-family: Georgia, Times, serif; 
font-weight: 100; 
line-height: 1.1; 
margin: 0.5em 0; 


} 
h1 { 
font-size: 36px; 
} 
h2 { 
font-size: 24px; 
} 
h3 { 
font-size: 21px; 
} 
h4 { 
font-size: 18px; 
} 
h5 { 
font-size: 16px; 
} 
h6 { 
font-size: 14px; 
} 
P, 
pre { 
margin-bottom: 12px; 
margin-top: 12px; 
} 
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4.3.5 ” 锚 点 标签 元 素 

销 点 标签 为 其 他 HTML 文档 或 同一 HIML 文 档 的 其 他 区 域 提供 链接 。 它 们 党 
用 : link, :visited, :focus, :hover 和 :active 伪 类 展示 状态 ， 因 此 为 其 定义 基础 样式 时 ， 
不 要 忘记 这 些 伪 类 。 下 面 一 一 说 明 这 些 伪 类 的 用 途 。 


。 :link 样式 应 用 于 具有 合法 href 属性 的 元 素 。 

。 :visited 样式 应 用 于 具有 合法 href 属性 的 超 链 接 元 素 ， 并 且 浏 览 器 的 历史 记录 之 中 含 
有 该 链接 。 

。 :focus 样式 应 用 于 获得 焦点 的 超 链 接 元 素 。 当 点 击 、 轻 触 元 素 ， 或 使 用 Tab 键 跳 转 到 

当前 元 素 时 ， 元 素 获 得 焦点 。 

。 :hover 样式 应 用 于 鼠标 光标 悬浮 于 超 链接 之 上 时 。 触 摸 设 备 ,没有 光标 悬浮 状态 。 因 此 ， 

通常 当 轻 触 元 素 时 ， 应 用 :hover 样式 ， 轻 触 其 他 元 素 时 ， 移 除 :hover 样式 。 

。 :active 样式 应 用 于 超 链 接 被 “激活 ”时 。 若 使 用 鼠标 ， 这 一 时 刻 发 生 在 点 击 超 链 接 ， 
鼠标 按键 弹 起 前 。 在 触摸 设备 上 ， 这 一 时 刻 发 生 在 轻 触 元 素 ， 手 指 移 开 之 前 。 


还 需要 注意 的 是 ， 如 果 使 用 伪 类 ，:Link 和 visited 这 两 个 伪 类 是 首先 要 指定 的 。 所 有 这 
些 伪 类 的 特 指 度 相等 ， 因 此 级 联 方 法 将 根据 定义 的 顺序 应 用 它们 。 这 表明 ， 如 果 一 条 超 链 
接 被 访问 ， 并 且 :visited 是 在 :hover、:focus 或 :active 后 面 定义 的 ， 将 优先 使 用 前 面 
为 :visited 伪 类 定义 的 、 与 后 面 重复 的 样式 。 

另 一 个 需要 记 住 的 事项 是 ， 所 有 这 些 伪 类 有 效 地 给 予 超 链接 更 高 的 特 指 度 ， 因 为 它们 由 类 
型 选择 器 和 伪 类 选择 器 组 成 。 这 表明 要 覆盖 这 些 样 式 ， 需 要 更 高 特 指 度 或 相同 特 指 度 ， 但 
在 样式 表 中 处 于 偏 后 位 置 的 样式 。 因 此 ，:tink 伪 类 常常 被 忽略 ， 而 超 链接 应 该 使 用 的 样 
式 直接 用 a 类 型 选择 器 来 设置 。 

为 销 点 标签 及 其 伪 类 定义 基础 样式 时 ， 应 该 考虑 的 常用 属性 包括 : 






















































































e background-color 
e border 

e color 

e font-weight 


e text-decoration 


ER PRD DL as FAERIE oe T, (BA :focus 伪 类 添加 样式 时 ， 为 其 定义 outline- 
width, outline-style 和 outline-color 属性 (或 更 简洁 的 outline 属性 ) 更 加 方便 。 











若 从 超 链接 元 素 的 :foucs 伪 类 中 删除 outline 属性 ， 且 不 在 页 面 上 以 可 见 
的 形式 加 以 提示 ， 对 于 只 用 键盘 或 使 用 其 他 交互 方式 有 别 于 鼠标 的 用 户 而 
言 ， 严 重 影 响 网 站 的 可 用 性 。 
































44 | 第 4 章 





i hE AERO A TAH, 因此 通常 将 其 默认 为 行内 元 素 '。 我 们 还 可 以 为 销 
点 标签 设置 font-family, font-size 和 font-weight 属性 ， 但 是 很 可 能 其 属性 值 将 继承 祖 
先 元 素 。 例 4-4 展示 的 是 如 何 为 销 点 标签 元 素 定义 基础 样式 。 


例 4-4 超 链接 的 基础 样式 





























` 


visited, 

focus, 

hover, 

active { 

color: inherit; 
text-decoration: underline; 


oowo po 


a:hover { 
background-color: #FFFF00; 
} 


4.3.6 ”文本 语义 元 素 


文本 语义 元 素 是 指 为 文本 提供 更 多 含义 或 结构 的 元 素 。 这 些 元 素 通常 为 行内 元 素 ， 其 中 包括 
<abbr>、<b>、<cite>、<code>、<data>、<dfn>、<em>、<i>、<kbd>、<s>、<strong>、<sub>、 


<sup>, <time> 和 <u> 等 标签 。 


因为 该 类 元 素 是 用 来 修改 文本 的 样式 ， 因 此 在 为 其 定义 基础 样式 时 ， 应 考虑 如 下 属性 : 





e color 
e font-family 
e font-size 


e font-weight 


例如 ， 我 们 可 以 为 <code> 标签 定义 如 下 样式 : 





code { 
color: #00FF00; 
font-family: monospace; 
font-weight: 500; 
line-height: 1.5; 

} 


4.3.7 ”列表 


列表 元 素 包括 <ol> (有 序列 表 )、<ul> (无 序列 表 ) 和 <dl> (定义 列表 ) 元 素 。 有 序 和 无 
序列 表 内 部 仅 能 直接 包含 <li> (列表 项 目 ) 元 素 ， 定 义 列表 元 素 仅 能 直接 包含 <dt> (定义 








= 





TE 1: 也 可 称 为 内 联 元 素 。 一 一 译 者 注 
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术语 ) 和 <dd> (定义 描述 ) 元 素 。 


因为 列表 有 很 多 种 ， 所 以 为 列表 定义 合适 的 基础 样式 有 一 定 难 度 。 如 果 网 站 以 展示 信息 为 
主 ， 通 常 使 用 有 序列 表 、 项 目 符号 列表 或 带 有 缩 进 的 定义 列表 ， 如 果 网 站 用 户 界面 更 加 复 
杂 ， 列 表 的 应 用 场景 有 多 种 ， 则 需要 根据 相应 的 设计 添加 样式 。 列 表 的 一 些 应 用 场景 包括 
水 平 导航 、 商 品 列表 、 社 交 媒体 用 户 的 个 人 主页 ， 等 等 。 


为 有 序 和 无 序列 表 元 素 定 义 基础 样式 时 ， 应 该 考虑 以 下 属性 : 

















e font-family 

e font-size 

e list-style-type ak list-style-image 
e list-style-position 

e line-height 

e margin-bottom 

e margin-top 


e padding-left 


对 于 纯粹 的 信息 类 网 站 ， 也 许 需 要 设置 List-style-type 或 list-style-image 和 list- 
style-position 属性 ， 辅 助 展示 列表 的 各 个 项 目 。 然 而 ， 对 于 更 像 是 应 用 类 的 网 站 ， 如 果 
较 少 使 用 它们 ， 最 好 为 其 赋 none 值 ， 从 而 不 必 每 次 都 重 写 其 样式 。 为 了 防止 子 元 素 的 缩 
BE, <ol> 或 <ul> 元 素 的 padding-left 属性 值 应 该 设置 为 96。 子 元 素 <li> 从 父 元 素 <ol> 
或 <ul> 继承 font-family, font-size 和 line-height 属性 ， 但 是 不 继承 margin 或 padding 
属性 。 


我 们 可 以 为 无 序列 表 指 定 以 下 样式 : 
































ul { 
list-style-position: outside; 
list-style-type: disc; 
margin-top: 0; 
margin-bottom: 12px; 


} 

ul ul { 
margin-bottom: 0; 

} 


B SR RK) list-style-type, list-style-image 或 list-style-position 只 是 应 用 于 display 
属性 设置 为 List-iten 的 元 素 ， 而 导致 它们 不 是 很 常用 ， 但 是 有 序 和 无 序列 表 有 具有 的 属性 ， 
定义 列表 同样 具有 。list-item 是 ti 元素 display 属性 的 默认 值 ， 而 <dt> 和 <dd> 元 素 该 
属性 的 默认 值 是 block, 
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<dd> 和 <dt> 元 素 从 其 父 元 素 <dl> 继承 font-family, font-size 和 line-height 属性 。 我 
们 通常 为 <dd> TRA margin-left 属性 来 实现 缩 进 效 果 ( 若 避 免 由 此 带 来 的 缩 进 ， 可 将 
该 属性 值 设置 为 0)。 











43.8 .组合 元 索 


组 合 元 素 (grouping element) 包括 <div>, <main> 和 <span>。 虽 然 ， 从 技术 上 讲 ，<span> 
标签 是 文本 级 的 语义 标签 ， 但 是 其 主要 用 途 是 将 文本 或 行内 元 素 包 在 一 起 。 


<div> 和 <main> 标签 是 典型 的 块 状元 素 ， 而 <span> 标签 是 行内 元 素 。 该 类 元 素 用 于 组 合 
其 他 标签 ， 因 此 通常 没 必 要 为 其 定义 基础 样式 ， 它 们 的 样式 根据 具体 情况 用 类 来 定义 。 然 
而 ， 如 果 <main> 标签 用 作 可 见 的 容器 ， 最 好 为 其 设置 margin 和 padding 属性 。 


43.9 表格 


表格 ,顾名思义 ， 是 用 表格 状 结构 展示 数据 。 以 表格 状 结构 展示 数据 ， 需 要 用 到 的 元 素 
包括 <table>, <caption>, <colgroup>, <col> ( 列 )、<tbody> (表格 主体 )、<thead> ( 表 
头 )、<tfoot> (表格 的 页 脚 )、<tr> (表格 行 )、<td> (表格 单元 格 ) 和 <th> 〈 表 头 单元 
格 ) 元 素 。20 世纪 90 年代 至 21 世纪 初 ， 创 建 页 面 布局 普遍 使 用 表格 ， 但 是 由 于 现在 
CSS 和 浏览 器 已 经 成 熟 ， 因 此 更 合理 的 做 法 是 用 其 他 元 素 创 建 布 局 ， 而 只 用 表格 展示 表 
格 状 数据 。 


为 <table> 元 素 定 义 基 础 样式 时 ， 需 要 考虑 以 下 属性 : 


























e border-collapse 

e border-spacing 

e border ( border-width, border-color FH border-style ) 
e empty-cells 

e font-family 

e font-size 

e letter-spacing 


e line-height 





为 <thead>, <tbody> 和 <tfoot> 元 素 定 义 基础 样式 时 ， 需 要 考虑 以 下 属性 ; 


e background-color 
e color 
e text-align 


e vertical-align 
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为 <th> 和 <td> 元 素 定 义 基 础 样式 时 ， 需 要 考虑 以 下 属性 : 


e background-color 

e border (border-width, border-color i] border-style ) 
。 color 

e font-family 

。 font-size 

e letter-spacing 

e line-height 

e text-align 


e vertical-align 
综合 以 上 内 容 ， 也 许 应 该 为 表格 定义 类 似 下 面 的 样式 : 


table { 
border-collapse: collapse; 
border-spacing: 0; 
empty-cells: show; 
border: 1px solid #000000; 


} 

tfoot, 

thead { 
text-align: left; 

} 

thead { 
background-color: #ACACAC; 
color: #000000; 

} 

th, 

td { 
border-left: 1px solid #000000; 
padding: 0.5em 1em; 

} 


th:first-child, 
td:first-child { 
border-left: none; 


} 


4.3.10 表单 


表单 用 来 收集 用 户 信 息 ， 表 单元 素 包 括 <form>, <label>, <input>, <button>, <select>, 


<datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>, 


<fieldset> 和 <legend>。 为 该 类 元 素 定义 基础 样式 时 ， 应 考虑 以 下 属性 : 























e font-family 
。 font-size 

e line-height 
e margin 


e padding 


对 于 普通 的 设计 ， 为 
也 许 需要 更 多 样式 。 


<form> 元 素 设置 样式 ， 子 元 素 从 它 继承 即 可 ， 但 是 更 为 复杂 的 设计 ， 
<form> 的 子 元 素 <Legend>、<LabeL> 和 <input> 的 font-weight, font- 





size 和 font-family 局 


性 通常 不 同 于 父 元 素 <form>， 因 此 应 该 在 子 元 素 上 定义 这 三 个 属性 。 








有 一 些 表单 元 素 ， 我 们 很 难为 其 添加 样式 ， 因 为 很 多 浏览 器 会 包 略 应 用 于 它们 的 属性 。 例 
如 ， 浏 览 器 会 忽略 为 复 选 框 和 单 选 按钮 的 border-color, border-width, background-color 
和 许多 其 他 属性 定义 的 样式 。 解 决 办 法 是 ， 自 定义 复 选 框 和 单 选 按钮 组 件 ， 隐 藏 表单 的 控 





制 控件 ， 并 使 用 其 他 









































HTML 元 素 实现 按钮 效果 ， 但 这 不 是 基础 样式 所 要 实现 的 。 


为 表单 元 素 定义 以 下 样式 ， 也 许 比较 合理 : 


fieldset { 
border: 0; 
margin: 0; 
padding: 0; 
} 


input { 
display: block 
font-size: inh 
padding: 4px; 
width: 100%; 

} 


label { 
display: block 
font-weight: 9 
margin-bottom: 
padding: 4px; 
} 


legend { 

border: 0; 
color: #000000 
display: block 
font-size: 1.2 
margin-bottom: 
padding: © 12p 
width: 100%; 


s 


erit; 


00; 
6px; 


3 

3 

en; 
12px; 

xX; 
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4.3.11 ”图像 
图 像 可 以 用 <img> 或 <picture> 标签 展示 。 为 图 像 元 素 定义 基础 样式 时 ， 应 该 考虑 如 下 属性 








e border 
e max-width 


e vertical-align 





因为 <img> 元 素 可 以 用 在 行内 元 素 之 中 ，vertical-align 属性 的 默认 值 为 baseline， 这 也 
许 适 合 或 不 适合 你 的 设计 任务 。 此 外 ， 当 <img> 元 素 置 于 设置 了 大 小 的 块 状元 素 之 中 时 ， 
将 max-width 属性 设置 为 父 容器 的 106%， 能 够 防止 图 像 溢出 容器 。 








img 标签 的 基础 样式 可 以 定义 为 : 


img { 
border: none; 
max-width: 100%; 
vertical-align: middle; 


} 


4.4 组 件 样式 


可 复 用 组 件 是 指 添加 了 样式 的 元 素 或 元 素 组 合 利用 视觉 隐喻 ， 使 得 用 户 与 网 站 的 交互 更 加 
容易 。 可 复 用 组 件 的 例子 包括 按钮 、 下 拉 荣 单 、 模 态 窗 口 、 进 度 条 和 选项 卡 。 








可 复 用 组 件 易于 辨识 ， 但 是 正确 创建 它们 有 一 定 难 度 。 创 建 可 复 用 组 件 之 前 ， 思 考 以 下 问 
题 将 对 你 很 有 帮助 。 


。 只 有 一 个 组 件 ， 还 是 有 一 个 以 上 的 组 件 组 合 在 一 起 ? 


。 组 件 是 行内 元 素 、 块 状元 素 还 是 其 他 类 型 (例如 : 组 件 以 绝对 定位 的 方式 独立 于 文档 
ie") ? 

















对 以 上 问题 的 答案 做 到 心中 有 数 后 ， 创 建 可 复 用 组 件 的 过 程 可 以 简化 如 下 。 








(1) 创建 组 件 之 前 ， 定 义 需 要 实现 的 行为 。 

(2) 保持 组 件 样式 的 粒度 ， 设 置 合 理 的 默认 值 。 

(3) 若 需 要 重 写 组 件 组 的 可 见 样式 ， 用 容器 元 素 将 它们 包 起 来 ， 为 该 容器 定义 一 个 具有 区 别 
度 的 类 。 

(4) 将 定义 元 素 尺 寸 的 任务 交 给 结构 化 容器 。 








下 面 示例 解释 了 如 何 构建 一 个 简单 的 选项 卡 组 件 〈 图 4-1)， 请 结合 该 示例 逐条 探索 上 述 
指南 。 























®© ® /Nm Example: Horizontal Tabs x A \ | Person 1 
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2] 


Tab Three 





Tab One Tab Two 














图 4-1: 选项 卡 组 件 


4.4.1 定义 需要 实现 的 行为 
对 于 这 个 示例 ， 我 们 要 创建 如 图 4-1 所 示 的 选项 卡 组 件 。 需 求 如 下 。 


。 图 4-1 的 选项 卡 组 件 有 三 个 选项 卡 ， 但 是 该 种 组 件 应 该 能 够 支持 两 个 及 以 上 选项 卡 。 
。 选项 卡 激活 时 ， 该 选项 卡 的 底 边 框 变 为 蓝 色 ,背景 变 为 白色 。 
。 选项 卡 处 于 非 激活 状态 时 ， 背 景 为 灰色 。 


我 们 使 用 例 4-5 所 示 的 HTML 代码 创建 选项 卡 组 件 。 
例 4-5 有 三 个 选项 卡 的 选项 卡 组 件 代码 


<nav> 
<ul> 
<li><a href="#">Tab One</a></li> 
<li><a href="#">Tab Two</a></li> 
<li><a href="#">Tab Three</a></li> 
</ul> 
</nav> 


44.2 ”保持 组 件 样式 的 粒度 
保持 组 件 样 式 的 粒度 是 指 为 组 件 的 每 个 元 素 添加 样式 ， 以 便 它们 能 够 复 用 。 例 4-5 中 有 三 
个 选项 卡 ， 因 此 应 该 为 每 个 选项 卡 ( 例 4-6) 创建 一 个 类 ,但 是 这 将 引入 大 量 重复 代码 。 
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例 4-6 为 每 个 选项 卡 定义 一 个 单独 的 类 


KK 


* 为 每 个 选项 卡 定 义 一 个 单独 的 类 ， 产 生 大 量 重复 代码 。 
*/ 











1 { /* styles go here */ } 
.tab-2 { /* styles go here */ } 
3 { /* styles go here */ } 


.tab-1:hover { /* styles go here */ } 
.tab-2:hover { /* styles go here */ } 
.tab-3:hover { /* styles go here */ } 


.tab-1.active { /* styles go here */ } 
.tab-2.active { /* styles go here */ } 
.tab-3.active { /* styles go here */ } 


.tab-1 > a { /* styles go here */ } 
.tab-2 > a { /* styles go here */ } 
.tab-3 > a { /* styles go here */ } 


.tab-group { /* styles go here */ } 





上 述 实现 方式 不 太 优雅 一 一 每 个 类 的 声明 块 跟 其 他 类 相同 ， 除 去 客户 端 需要 下 载 更 大 的 
CSS 文件 ， 还 会 增加 显示 效果 不 一 致 的 风险 ， 因 为 需要 维护 的 代码 相应 增多 。 为 了 避免 这 
些 问 题 ， 我 们 可 以 按照 例 4-7 的 做 法 将 每 个 选项 卡 的 类 组 合 起 来 ， 但 是 仍然 有 很 多 类 实现 
的 效果 相同 。 


例 4-7 将 每 个 选项 下 的 类 组 合 起 来 


[** 


* 像 下面 这 样 将 每 个 选项 卡 的 类 组 合 起 来 ， 产 生 大 量 设 有 用 处 的 重复 代码 。 
*/ 








.tab-1, 
.tab-2, 
.tab-3 { 

/* 将 样式 写 到 这 里 */ 

















} 


.tab-1:hover, 
.tab-2:hover, 
.tab-3:hover { 

/* 将 样式 写 到 这 里 */ 
} 

















.tab-1.active, 
.tab-2.active, 
.tab-3.active { 

/* 将 样式 写 到 这 里 */ 
} 

















.tab-1 > a, 
.tab-2 > a, 
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.tab-3 > a { 
/* 将 样式 写 到 这 里 */ 
} 


.tab-group { 
/* 将 样式 写 到 这 里 */ 
} 


最 佳 的 解决 方案 是 将 选项 卡 的 样式 抽象 为 一 个 可 复 用 的 类 〈 例 48)。 请 注意 ， 例 4-8 还 定 
XT active k, 我们 可 以 根据 选项 卡 状态 添加 它 ， 以 表示 哪个 选项 卡 处 于 激活 状态 。 此 
外 ， 下 述 代 码 还 定义 了 .tab-group 元 素 的 样式 ， 该 元 素 包 含 多 个 选项 卡 。 





例 4-8 选项 卡 样式 
[** 
* 选项 下 组 件 样式 
ia 





.tab { 
background-color: #F2F2F2; 
border-bottom: 1px solid #EEEEEE; 
border-top: 1px solid #EEEEEE; 
bottom: -1px; 
display: inline-block; 
margin-left: 0; 
margin-right: 0; 
margin-top: 4px; 
position: relative; 


} 


.tab:first-child { 
border-left: 1px solid #EEEEEE; 
border-top-left-radius: 4px; 


} 


.tab:last-child { 
border-right: 1px solid #EEEEEE; 
border-top-right-radius: 4px; 


} 


.tab.active { 
background-color: #FFFFFF; 
border-bottom: 1px solid #2196F3; 
color: #000000; 


} 


.tab:hover { 
background-color: #F9F9F9; 


} 


.tab>a { 
color: inherit; 
display: block; 
height: 100%; 
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padding: 12px; 
text-decoration: none; 
width: 100%; 

} 


KK 


* 选项 卡 组 件 容器 
* 
/ 


.tab-group { 
border-bottom: 1px solid #EEEEEE; 
list-style: none; 
margin: 0; 
padding-left: 0; 


既然 已 经 为 选项 卡 组 件 的 各 个 类 定义 了 恰当 的 样式 ， 接 下 来 我 们 可 以 用 这 些 类 来 更 新 选项 
卡 组 件 的 HTML 代码 ， 请 见 例 4-9。 


例 4-9 用 新 选项 卡 类 更 新 包含 三 个 选项 卡 的 HTML 代码 
<nav> 
<ul class="tab-group"> 
<li class="tab active"><a href="#">Tab One</a></li> 
<li class="tab"><a href="#">Tab Two</a></li> 
<li class="tab"><a href="#">Tab Three</a></li> 
</ul> 
</nav> 








443 ”根据 需要 ， 改 写 元 素 容器 的 样式 


至 此 ， 我 们 实现 了 一 个 水 平 选 项 卡 组 件 ， 但 是 如 果 我 们 想 垂直 展示 选项 卡 该 怎么 做 呢 ? 
如 要 为 选项 卡 应 用 不 同样 式 ， 我 们 可 将 定义 选项 卡 样式 的 任务 交 由 父 容器 完成 。 为 了 实 
现 这 一 功能 ， 首 先 创建 一 个 新 的 .tab-group-vertical 类 ,该 类 包含 一 个 .tab 元 素 ， 然 后 
用 .tab-group 类 将 .tab 元 素 组 合 在 一 起 : 




















.tab-group, 
.tab-group-vertical { 
list-style: none; 

margin: 0; 
padding-left: 0; 
} 


接 下 来 ， 我 们 将 之 前 在 .tab 规则 集中 定义 的 一 些 声 明 挪 到 用 更 加 精确 的 选择 器 定义 的 规则 
集中 ， 以 便 新 定义 的 几 个 类 不 用 重复 改写 这 些 规 则 集 。 完 成 上 述 改动 后 ，.tab 类 将 只 包含 
适用 于 所 有 选项 卡 的 样式 ; 

.tab { 

background-color: #F2F2F2; 


margin-left: 0; 
margin-right: 0; 











position: relative; 


} 


.tab:hover { 
background-color: #F9F9F9; 
} 


.tab.active { 
background-color: #FFFFFF; 
color: #000000; 

} 


I 
D 


HÆ, by 4% border, border-radius 和 display 样式 交 由 合适 的 父 
.tab-group-vertical 类 各 有 各 的 边框 样式 ( 例 4-10)。 


il 4-10 将 属性 交 由 合适 的 容器 
/** 
* 水 平 选项 下 组 
*/ 


, .tab-group、 


X} 














.tab-group { 
border-bottom: 1px solid #EEEEEE; 
} 


.tab-group .tab { 
AB border-bottom: 1px solid #EEEEEE; 
border-top: 1px solid #EEEEEE; 
FA bottom: -1px; 
display: inline-block; 
} 


.tab-group .tab:first-child { 
border-left: 1px solid #EEEEEE; 
border-top-left-radius: 4px; 


} 


.tab-group .tab:last-child { 
border-right: 1px solid #EEEEEE; 
border-top-right-radius: 4px; 


} 


.tab-group .tab.active { 
border-bottom: 1px solid #2196F3; 


} 
[** 
* 垂直 选项 卡 组 
*/ 


.tab-group-vertical { 
border-left: 1px solid #EEEEEE; 
} 
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.tab-group-vertical .tab { 
border-left: 1px solid #EEEEEE; 
border-right: 1px solid #EEEEEE; 
left: -1px; 
display: block; 

} 


.tab-group-vertical .tab:first-child { 
border-top: 1px solid #EEEEEE; 
border-top-right-radius: 4px; 


} 


.tab-group-vertical .tab:last-child { 
border-bottom: 1px solid #EEEEEE; 
border-bottom-right-radius: 4px; 


} 


.tab-group-vertical .tab.active { 
border-left: 1px solid #2196F3; 


} 





上 述 代码 还 有 一 处 需要 重 构 ， 你 也 许 已 经 注意 到 了 ，1px solid #EEEEE 语句 重复 出 现 了 多 


次 。 我 们 可 以 通过 在 .tab 类 中 定义 border-color 和 border-style 属性 ， 








合 














Hix a border- 











width 属性 值 ， 必 要 时 重 写 border-color 属性 对 此 进行 重 构 ， 如 例 4-11 所 示 。 该 方法 的 优 





点 是 ， 若 要 修改 选项 卡 颜色 ， 所 需 改 动 之 处 更 少 。 
例 4-11 用 新 选项 卡 类 更 新 包含 三 个 选项 卡 的 HTML 代码 


/** 
* 选项 卡 组 件 样 式 
*/ 





.tab { 
background-color: #F2F2F2; 
margin-left: 0; 
margin-right: 0; 
position: relative; 


} 


.tab:hover { 
background-color: #F9F9F9; 


} 


-tab.active { 
background-color: #FFFFFF; 
color: #000000; 


} 


.tab > a { 
color: inherit; 
display: block; 
height: 100%; 





padding: 12px; 
text-decoration: none; 
width: 100%; 


} 

[** 
* 选项 卡 组 件 容器 
# 

.tab-group， 


.tab-group-vertical { 
list-style: none; 
margin: 0; 
padding-left: 0; 

} 


. tab, 

.tab-group, 

.tab-group-vertical { 
border-color: #EEEEEE; 
border-style: solid; 
border-width: 0; 


} 


/[** 
* 水 平 选项 卡 组 
st 





.tab-group { 
border-bottom-width: 1px; 


} 


.tab-group .tab { 
border-bottom-width: 1px; 
border-top-width: 1px; 
bottom: -1px; 
display: inline-block; 

} 


.tab-group .tab:first-child { 
border-left-width: 1px; 
border-top-left-radius: 4px; 


} 


.tab-group .tab:last-child { 
border-right-width: 1px; 
border-top-right-radius: 4px; 


} 


.tab-group .tab.active { 
border-bottom-color: #2196F3; 
border-bottom-width: 1px; 


} 
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* 垂直 选项 下 组 





.tab-group-vertical { 
border-left-width: 1px; 
} 


.tab-group-vertical .tab { 
border-left-width: 1px; 
border-right-width: 1px; 
left: -1px; 
display: block; 

} 


.tab-group-vertical .tab:first-child { 
border-top-width: 1px; 
border-top-right-radius: 4px; 


} 


.tab-group-vertical .tab:last-child { 
border-bottom-width: 1px; 
border-bottom-right-radius: 4px; 


} 


.tab-group-vertical .tab.active { 
border-left-color: #2196F3; 
border-left-width: 1px; 


} 


用 例 4-11 所 示 的 CSS 代码 泻 染 一 组 用 .tab-group-vertical 作为 类 的 选项 卡 ， 将 得 到 区 


4-2 所 示 的 效果 。 








®© @ / [)_Example: vertical Tabs x\ | Person1 | 
€ Ca gJ: 


Tab One 
Tab Two 


Tab Three 














4-2: 垂直 选项 卡 





这 些 选 项 卡 显示 效果 还 存在 问题 ， 我 们 接 下 来 将 定义 选项 卡尺 寸 的 任务 交 给 结构 化 容 


ag 


AN o 




















444 将 定义 尺寸 的 任务 交 给 结构 化 容器 

你 也 许 已 经 注意 到 了 ， 我 们 前 面 编写 的 .tab-group 和 .tab-group-vertical 组 件 没 有 指定 
尺寸 。 其 实 是 有 意 省 略 的 ， 因 为 我 们 接 下 来 要 将 定义 尺寸 的 任务 交 给 包 着 组 件 或 组 件 组 的 
外 层 结构 。 下 一 节 要 讲 的 结构 化 样式 ， 指 的 是 支配 页 面 基 本 结构 的 样式 。 你 可 以 创建 任意 
不 同类 型 的 布局 ， 比 如 带 侧 边栏 、 分 栏 或 其 他 任何 你 能 想到 的 布局 。 

















组 件 能 够 复 用 


例如 ， 假 定 我 


国 然 很 好 ， 但 是 我 们 很 难 预 测 它 出 现在 页 面 中 的 位 置 。 这 也 正 是 为 什么 要 将 
设置 元 素 尺 寸 的 任务 交 给 盛 放 组 件 的 元 素 。 





























门 希望 展示 两 组 水 平 选项 卡 ， 每 组 各 占 桌 面 浏 览 器 50% 的 可 视 区 域 ， 如 图 


4-3 所 示 。 我 们 可 以 在 .tab-group 定义 中 增加 width: 50% 的 声明 ， 但 如 果 还 需要 在 其 他 
不 同位 置 使 用 选项 卡 ， 像 前 面 这 样 定义 宽度 ， 复 用 性 不 高 。 因 而 ， 我 们 需要 像 例 4-12 DB 
样 ， 将 设置 尺寸 的 任务 交 给 类 名 为 .tabbed-pane 的 结构 化 元 素 。 该 例 纯粹 是 为 了 说 明 如 
何 将 定义 尺寸 的 任务 交 给 其 他 元 素 ， 实 际 应 用 中 你 可 能 不 想 在 同一 页 面 使 用 多 组 不 同 的 
































选项 卡 。 
© © @ Eample: Tabs A aiant 
< ea a 
Home Policy One Policy Two Policy Three FeeOne FeeTwo Fee Three 
Policies & 
Fees 
Documents 























图 4-3: 将 定义 组 件 尺 十 的 任务 交 给 结构 化 容器 
例 4-12 将 定义 组 件 尺寸 的 任务 交 给 结构 化 容器 的 代码 


<!doctype html> 


<html> 
<head> 


<title>Example: Tabs</title> 
<style type="text/css"> 


* 
# 


*:after, 


*:before { 
box-sizing: border-box; 
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} 


body { 
margin: 0; 
padding: 0; 

} 

/** 

* 选项 卡 组 件 样式 
3 

.tab { 


background-color: #F2F2F2; 
margin-left: 0; 
margin-right: 0; 

position: relative; 


} 


.tab:hover { 
background-color: #F9F9F9; 
} 


.tab.active { 
background-color: #FFFFFF; 
color: #000000; 

} 


.tab >a { 
color: inherit; 
display: block; 
height: 100%; 
padding: 12px; 
text-decoration: none; 
width: 100%; 


3 

/** 

* 选项 卡 组 件 容器 
.tab-group, 


.tab-group-vertical { 
list-style: none; 
margin: 0; 
padding-left: 0; 

} 


.tab, 

.tab-group, 

.tab-group-vertical { 
border-color: #EEEEEE; 
border-style: solid; 
border-width: 0; 





/** 
* 水 平 选项 卡 组 
*/ 





.tab-group { 
border-bottom-width: 1px; 


} 


.tab-group .tab { 
border-bottom-width: 1px; 
border-top-width: 1px; 
bottom: -1px; 
display: inline-block; 

} 


.tab-group .tab:first-child { 
border-left-width: 1px; 
border-top-left-radius: 4px; 


} 


.tab-group .tab:last-child { 
border-right-width: 1px; 
border-top-right-radius: 4px; 


} 


.tab-group .tab.active { 
border-bottom-color: #2196F3; 
border-bottom-width: 1px; 


} 

[** 
* 垂直 选项 卡 组 
*/ 


.tab-group-vertical { 
border-left-width: 1px; 
} 


.tab-group-vertical .tab { 
border-left-width: 1px; 
border-right-width: 1px; 
left: -1px; 
display: block; 

} 


.tab-group-vertical .tab:first-child { 
border-top-width: 1px; 
border-top-right-radius: 4px; 


} 


.tab-group-vertical .tab:last-child { 
border-bottom-width: 1px; 
border-bottom-right-radius: 4px; 


} 
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.tab-group-vertical .tab.active { 
border-left-color: #2196F3; 
border-left-width: 1px; 


} 

[** 
* 选项 卡 组 件 容器 
*/ 


.tabbed-pane { 
display: block; 
width: 100%; 

} 


.tabbed-pane .tab-group { 
float: left; 
width: 45%; 

} 


.tabbed-pane .tab-group:first-child { 
margin-right: 5%; 


} 


.tabbed-pane .tab-group:last-child { 
margin-left: 5%; 


} 


/** 
ey 





.global-nav { 
float: left; 
padding: 5% 0; 
width: 10% 

} 


.content { 
float: left; 
padding: 5%; 


width: 80%; 
} 

</style> 
</head> 
<body> 


<nav class="global-nav"> 
<ul class="tab-group-vertical"> 
<li class="tab"><a href="#">Home</a> 
<li class="tab active"><a href="#">Policies &amp; Fees</a> 
<li class="tab"><a href="#">Documents</a> 
<li class="tab"><a href="#">Billing</a> 
</ul> 
</nav> 





<main class="content"> 
<nav class="tabbed-pane"> 
<ul class="tab-group"> 
<li class="tab active"><a href="#">Policy One</a> 
<li class="tab"><a href="#">Policy Two</a> 
<li class="tab"><a href="#">Policy Three</a> 
</ul> 
<ul class="tab-group"> 
<li class="tab active"><a href="#">Fee One</a> 
<li class="tab"><a href="#">Fee Two</a> 
<li class="tab"><a href="#">Fee Three</a> 
</ul> 
</nav> 
</main> 
</body> 
</html 


4.5 结构 化 样式 


结构 化 样式 包括 组 件 及 其 容器 ， 比 如 例 4-12 定义 的 .tabbed-pane 元 素 。 既 然 需要 为 布局 
定义 尺寸 ， 我们 可 以 用 结构 化 样式 设置 尺寸 ， 然 后 将 其 添加 给 组 件 和 容器 。 例 4-13 中 的 
代码 实现 了 一 种 简单 的 布局 ， 其 中 包括 标题 栏 、 侧 边栏 和 内 容 区 域 (图 4-4)。 当 视 口 变 小 
时 ， 标 题 栏 、 侧 边栏 和 内 容 区 域 垂直 排列 〈 图 4-5)。 


例 4-13 由 标题 栏 、 侧 边栏 和 内 容 区 域 组 成 的 布局 
<!doctype html> 
<html> 
<head> 
<title>Layout Example</title> 
<style type="text/css"> 
* 





Ny 









































*:after, 
*:before { 
box-sizing: border-box; 


} 


html, 

body, 

main { 
height: 100%; 
margin: 0; 
width: 100%; 

} 


.Layout-header { 
background-color: #DDDD88; 
display: block; 
min-height: 10%; 
width: 100%; 

} 
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. Layout-header, 

. Layout-sidebar, 

. Layout-content { 
text-align: center; 


} 


. Layout-sidebar, 
. Layout-content { 
float: left; 
height: 100%; 


} 


. Layout-sidebar { 
background-color: #8888BB; 
width: 20%; 

} 

. Layout-content { 
background-color: #EEBB55; 
width: 80%; 

} 


@media all and (max-width: 640px) { 
. Layout-header , 
. Layout-sidebar, 
. Layout-content { 
display: block; 
float: none; 
height: auto; 
min-height: 100px; 
width: 100%; 
} 
} 
</style> 
</head> 
<body> 
<main> 
<header class="Layout-header">Header</header> 
<div class="Layout-sidebar">Sidebar</div> 
<div class="Layout-content">Content</div> 
</main> 
</body> 
</html> 




















图 4-4: 由 标题 栏 、 侧 边栏 和 内 容 区 域 组 成 的 布局 

















图 4-5: 标题 栏 、 侧 边栏 和 内 容 区 域 垂 直 排列 的 布局 
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人 已 ay + 
4.6 功能 样式 
第 2 意 讲 过 ，!inportant 声明 通过 告诉 浏览 器 ， 某 一 声明 应 该 用 于 与 其 所 在 的 规则 集 选择 
器 相 匹配 的 元 素 ， 而 不 管 声明 块 的 特 指 度 高 低 ， 从 而 改写 了 级 联 样式 。 若 误 用 !important 
将 导致 CSS 混乱 ， 如 果 在 多 个 声明 块 为 同一 元 素 定义 样式 时 均 使 用 了 :inportant， 规 则 集 
的 出 现 顺序 将 决定 应 用 哪 种 样式 。 











不 用 important 可 以 避免 CSS 混乱 ， 但 如 果 合 理 使 用 ， 它 的 帮助 作用 会 很 大 。 功 能 样式 
是 指 谨慎 的 开发 人 员 在 定义 HTML 元 素 的 类 时 为 其 指定 的 样式 ， 或 满足 特定 条 件 时 ， 用 
JavaScript 添加 的 样式 。 例 如 ， 如 果 你 想 按 下 按钮 隐藏 某 个 元 素 ， 可 以 通过 添加 下 面 这 个 
类 来 实现 : 





























«hidden { 
display: none !important; 
} 
添加 important 能 够 确保 不 管 为 元 素 增加 或 删除 其 他 的 类 ， 元 素 将 一 直 处 于 隐藏 状态 ( 当 
然 ， 除非 在 后 面 再 添加 display 属性 ， 并 用 !important 提升 优先 级 引发 了 冲突 )。 


Sy] UA = t e 
4.7 浏览 器 特定 样式 
由 于 老 的 浏览 器 有 一 些 怪癖 ， 我 们 可 以 使 用 浏览 器 特定 CSS 技术 ， 引 导 浏 览 器 按照 你 的 
预期 工作 ， 以 克服 这 些 问 题 。 例 如 ， 由 于 Internet Explorer 7 的 一 个 bug，display 属性 的 
inline-block 属性 值 有 时 无 法 实现 预期 效果 ， 但 是 我 们 仍然 能 够 让 元 素 表现 为 inline-block 
元 素 ， 方 法 请 见 例 4-14。 




















例 4-14 IE7 ÑY inline-block 问题 解决 技巧 


.SeLector { 
display: inline-block; 
*display: inline; 
zoom: 1; 


} 


上 述 代码 有 两 个 问题 。 其 一 ，*display 属性 不 合法 ， 因 为 它 存 在 句法 错误 (属性 名 不 能 
以 * 开 始 )。 其 二 ， 我 们 为 了 兼容 过 时 的 浏览 器 ， 利 用 “ 黑 技 术 ” 编 写 了 存在 句法 错误 的 
CSS。 如 果 你 确实 无 法 放弃 支持 需要 采用 “ 黑 技 术 ” 的 浏览 器 ， 那 么 应 该 将 这 些 语句 单独 
写 到 一 块 ， 并 且 添 加 注释 来 解释 这 些 代 码 的 用 途 。 例 如 ， 如 果 你 需要 用 CSS 技巧 支持 老 的 
Internet Explorer 浏览 器 ， 那 么 应 该 将 其 放 到 单独 的 样式 表 中 ， 并 用 条 件 注释 (conditional 
comments) 添加 对 该 样式 表 的 引用 ， 只 为 特定 版 本 的 浏览 器 加 载 这 些 样 式 。 
























































<!--[if IE 7]> 
<link rel="stylesheet" href="ie7.css" type="text/css" /> 
<![endif]--> 
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48 总 结 

本 章 介 绍 了 不 同 用 途 的 样式 。 虽 然 这 些 概念 非常 简单 ， 却 很 强大 。 正 如 第 6 章 要 讲 的 ， 扎 
实地 理解 样式 的 不 同 用 途 以 及 级 联 样 式 的 功能 ， 将 会 使 合理 调整 并 复 用 CSS 变 得 更 加 简 
单 。 开 始 调整 和 重 构 CSS 之 前 ， 我 们 先 讨论 一 下 测试 。 
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测试 





测试 CSS 有 难度 ， 因 为 不 同 的 平台 、 屏 幕 尺 寸 和 设备 都 需要 测试 。 本 章 将 探讨 如 何 决 定 需 
要 测试 的 浏览 器 和 设备 ， 以 及 测试 和 维护 CSS 的 几 种 不 同方 式 。 学 完 本 章 ， 你 应 该 能 够 更 
好 地 理解 如 何 测 试 CSS， 带 着 这 些 知 识 重 构 代 码 ， 你 将 更 加 自信 。 


s sayy ks 
5.1 为 什么 说 测试 很 困难 
全 面 彻底 地 对 CSS 代码 的 改动 进行 测试 会 花费 较 长 时 间 ， 并 且 需 要 用 到 多 种 不 同 工 具 。 
测试 时 需要 考虑 很 多 因素 ， 其 中 包括 以 下 几 点 。 


。 正在 用 什么 浏览 器 测试 网 页 ? 

。 如 何在 不 同 的 操作 系统 上 测试 各 种 各 样 的 浏览 器 ? 

。 正在 多 大 的 窗口 浏览 网 页 ? 

。 如 何 快速 测试 大 量 网 页 ? 

。 如 何 验 证 你 所 看 到 的 效果 是 正确 的 ? 

。 如 果 你 无 法 获得 某 些 设备 ， 如 何 测 试 网 站 在 这 些 设备 上 的 效果 ? 


5.2 需要 测试 的 重点 浏览 


测试 之 前 ， 知 道 哪 些 浏 览 器 应 该 被 测试 是 很 重要 的 。 理 想 情况 下 ， 你 只 需要 支持 多 数 用 户 
访问 网 站 所 用 的 浏览 器 即 可 〈 有 具体 的 国 值 因 公司 而 异 )。 网 站 用 户 所 使 用 的 浏览 器 、 设 
及 其 版 本 号 ， 可 用 网 站 分 析 工 具 获 取 ， 非 常 简单 。 
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5.3 浏览 器 市 场 份额 

能 够 支持 最 近 几 年 发 布 的 所 有 主要 训 览 器 是 很 重要 的 。Chrome、Firefox、Safari 和 
Microsoft Edge (以 及 更 早 的 Internet Explorer) 的 最 近 几 个 版 本 及 其 相应 的 移动 端 版 本 ， 在 
兼容 浏览 器 标准 方面 做 了 很 多 了 不 起 的 工作 ， 因 此 它们 的 行为 与 过 去 相 比 会 显得 更 加 一 
致 。 以 上 每 种 浏览 器 都 提供 自动 更 新 功能 ， 这 表明 随 着 时 间 的 发 展 ， 更 多 用 户 都 将 使 用 最 
新 的 现代 浏览 器 。 




















然而 ， 不 幸 的 是 ， 一 些 用 户 仍 旧 在 使 用 老式 浏览 器 。 例 如 ， 写 作 本 书 时 ， 根 据 NetMarketShare 
调查 结果 显示 ，Microsoft Edge/Internet Explorer 三 个 最 常用 的 版 本 依次 为 Internet Explorer 
11, Internet Explorer 8 和 Edge 13 (图 5-1)。 











Other: 28.95 % ENS we Chrome 51.0: 29.15 % 


Chrome 49.0: 3.51 % Nod 
Microsoft Edge 13: 4.57 % I A 
Microsoft Internet Explorer 8.0: 4.79 % SS 7 A 4 
Firefox 47: 5.33 % —__/ 


J 


5-1; NetMarketShare 公布 的 2016 年 7 月 桌面 浏览 器 市 场 份额 







~ Microsoft Internet Explorer 11.0: 18.08 % 
Chrome 45.0: 5.62 % 











如 果 用 户 不 是 频繁 地 使 用 老式 浏览 器 访问 你 的 网 站 ,你 可 能 没 必要 担心 维护 兼容 老式 浏览 
器 的 代码 。 然 而 ， 如 果 老 式 浏 览 器 贡献 了 可 观 的 疲 量 ， 那 么 你 也 许 要 考虑 继续 支持 它们 ， 
网 站 若 能 为 你 带 来 收入 ， 则 更 应 如 此 。 

















Google Analytics 的 浏览 器 统计 数据 和 屏幕 分 辩 率 
Google Analytics (http://www.google.com/analytics) 是 Google 提供 的 免费 增值 服务 ， 它 是 
最 常用 的 网 站 分 析 工 具 集 之 一 。Google Analytics 跟踪 网 站 流量 、 用 户 行为 等 数据 。 我 们 一 
起 来 看 看 其 中 两 个 对 CSS 重 构 非常 重要 的 数据 : 浏览 器 信息 和 屏幕 分 辨 率 。 


在 其 他 分 析 工 具 中 ， 查 找 浏览 器 统计 数据 和 屏幕 分 辨 率 

如 果 不 使 用 Google Analytics 而 是 用 其 他 分 析 工 具 ， 你 也 许 仍然 能 够 找到 用 
户 访 问 网 站 所 用 的 浏览 器 和 屏幕 分 辨 率 数据 。 请 参考 分 析 工 具 的 文档 ， 了 解 
更 多 信息 。 




















1. 浏览 器 信息 
写作 本 书 时 ， 我 选中 了 “Browser” 作 为 首要 查看 维度 ， 浏 览 器 信息 可 从 Google Analytics 
的 Audience 一 Technology 一 Browser & OS 菜单 中 找到 (图 5-2)。 点 击 “Browser & OS” 
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菜单 ， 在 右 侧 打 开 的 页 面 再 点 击 一 款 浏 览 嚣 名称， 即 可 查看 该 浏览 器 的 各 个 版 本 访问 网 站 
的 统计 数据 ， 如 图 5-3 所 示 。 从 这 些 统计 信息 中 ， 我 们 可 以 找 出 多 数 用 户 使 用 什么 浏览 器 。 
如 果 你 发 现 自己 花费 大 量 时 间 编 写 的 CSS 支持 很 少 用 户 使 用 的 老式 浏览 器 ， 那 么 应 该 考虑 
放弃 这 种 支持 。 
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2. 屏 幕 分 辨 率 

选中 “Screen Resolution” 作 为 Google Analytics 的 首要 查看 维度 ， 然 后 可 从 Audience 一 
Technology 一 Browser & OS 菜单 中 找到 屏幕 分 辨 率 信息 (图 5-4)。 从 这 些 信息 可 知 用 户 访 
问 网 站 时 所 用 设备 的 屏幕 尺寸 ， 并 可 帮助 你 确定 网 站 设计 所 要 满足 的 最 普遍 的 应 用 场景 。 
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5.4 测试 多 个 浏览 
最 常用 的 测试 CSS 在 不 同 浏览 器 中 显示 效果 的 方法 是 人 工 测试 。 你 可 能 想 下 载 以 下 所 有 主 


流 浏览 器 ， 





e Google Chrome (http://www.google.com/chrome ) 
e Firefox (https://www.mozilla.org/firefox ) 
e Safari (https://www.apple.com/safari ) 


。 Microsoft Edge (https://www.microsoft.com/en-us/windows/microsoft-edge ) 


为 了 测试 CSS 在 移动 端的 效果 ， 你 需要 从 合适 的 应 用 市 场 下 载 适合 于 设备 的 各 种 浏览 器 。 





5.4.1 iOS 系 统 的 Safari 浏 览 


要 用 iOS 系统 的 Safari 浏览 器 测试 ， 可 以 使 用 iOS 设备 的 原生 应 用 或 Xcode AY iOS 模拟 
器 。 你 可 以 从 Apple App Store 免费 下 载 Xcode (图 $5-53) ， 但 不 幸 的 是 ，Xcode 只 能 在 Mac 
OS 系统 上 运行 ， 无 法 安装 到 Windows 系统 。 

















Xcode 


Create great apps 
for Mac, iPhone, and iPad. 


Xcode 
ED 


Xcode provides everything developers need to create great applications for Mac, iPhone, and iPad. Xcode brings user interface design, 
coding, testing, and debugging all into a unified workflow. The Xcode IDE combined with the Cocoa and Cocoa Touch frameworks, and 
the Swift programming language make developing apps easier and more fun than ever before. Apple Web Site 


wee Xcode Support 


What's New in Version 6.3 App License Agreement 


Includes Swift 1.2 and SDKs for OS X 10.10 Yosemite and iOS 8.3 
Privacy Policy 


Information 

Category: Developer Tools 
Updated: Apr 08, 2015 
Version: 6.3 

Price: Free 

Size: 2.57 GB 

Family Sharing: Yes 
Language: English 

Seller: Apple Inc. 

© 1999-2014 Apple Inc. 


É Heese Fhe tat View Ped Nevin Hater podici Deeg Sure Cont wow Ho, 





Rated 4+ 


Compatibility: 
OS X 10.10 or later 
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安装 好 Xcode 之 后 ， 先 从 Xcode 一 Open Developer Tool 一 iOS Simulator 启动 iOS 模拟 器 ， 


然后 可 以 启动 Safari 浏览 器 ， 查 看 网 站 的 显示 效果 (图 5-6). 
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图 5-6: 使 用 iOS 模拟 器 中 的 Safari 浏览 
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安 卓 设 备 可 以 用 Android Studio 的 模拟 器 测试 (图 5-7), 


android.com 免费 下 载 。 


Android Studio 可 以 从 http://developer. 








@ OO | [M 10_saved_search.notificati x \( [Testing and Refactoring C x ) Download Android Studio x \ 








€ > © D developer.android.com/sdk/index.htmi 





Training API Guides 


Download 
Installing the SDK 
‘Adding SDK Packages 


Android Studio ~ 
Workflow ~ 
Tools Help v 
Build System { 
Testing Tools ~ 
Support Library ~ 


Revisions 


Eclipse with ADT ~ 





"i Developers ~ | Design 


Reference 


/以 


Develop Distribute 


Google Services 


Android 


Download Android Studio 
for Mac 


+ System Requirements 
» Other Download Options 

+ Migrating to Android Studio 
e Take a Survey 


Samples 
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安装 好 Android Studio 之 后 ， 新 建 一 个 空 
菜单 选择 一 种 模拟 器 ， 完 成 创建 和 启动 模拟 器 


项 目 ， 然 后 从 Tools > Android > AVD Manager 


(图 5-8)。 





Select Hardware 


以 Choose a device definition 





Name v 


Nexus S 
Nexus One 


Nexus 6 


Nexus 4 
Galaxy Nexus 
5.4" FWVGA 
5.1" WVGA 
4.7" WXGA 


4.65" 720p (Gala... 


[Resolution 


480x800 


480x800 


1440x2560 


768x1280 


720x1280 


480x854 


480x800 


720x1280 


720x1280 





{New Hardware Profile | 


{Import Hardware Profiles | 








Density 
hdpi 


hdpi 


S60dpi 





Nexus5 





normal 
Ratio: notlong 
Density: xxhdpi 


[Clone Device... 


Es (Finish 


Previous 
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启动 模拟 器 后 ， 可 以 在 模拟 设备 中 启动 Web 浏览 器 ， 并 用 其 查看 网 站 ，Android Studio 模 
拟 器 非常 类 似 于 iOS 模拟 器 (图 5-9)。 
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图 5-9: 模拟 安 卓 设 备 


3 seb * 3 lk 
5.5 测试 老式 浏览 
本 章 开 头 ， 我 们 学 习 了 如 何 用 分 析 工 具 判 断 用 户 是 否 频繁 用 过 时 的 浏览 器 访问 网 站 。 有 些 
情况 下 ， 你 也 许 会 放弃 支持 老式 浏览 器 一 一 但 是 如 果 无 法 放弃 ， 你 需要 确保 这 部 分 用 户 依 
旧 能 够 正常 使 用 网 站 。 下 面 几 节 介 绍 如 何 测 试 网 站 在 老式 浏览 器 中 的 显示 效果 。 
































5.5.1 Internet Explorer 和 Microsoft Edge 


你 可 以 从 https://www.modern.ie 下 载 Microsoft Edge 和 老式 的 Internet Explorer 用 于 测试 。 
这 些 虚 拟 机 形式 的 浏览 器 ， 可 以 运行 在 VirtualBox (https://www.virtualbox.org/), VMWare 
(http:/Awww.vmware.com) 或 Parallels (http://www.parallels.com) 虚拟 机 软件 之 中 。 虚 拟 机 
是 一 种 模拟 操作 系统 的 软件 ，VirtualBox、VMWare 和 Parallels 是 可 以 运行 虚拟 机 的 程序 。 
虚拟 机 的 用 处 很 大 ，Internet Explorer 等 软件 的 编译 方式 决定 了 它们 只 能 运行 在 特定 的 操作 
系统 上 ,但 是 虚拟 机 能 够 提供 浏览 器 可 以 正常 运行 的 虚拟 环境 。 
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5.5.2 Firefox 浏览 器 


老式 Firefox 浏览 器 下 载 地 址 为 https://support.mozilla.org/en-US/kb/install-older-version-of- 
firefox。 测 试 网 站 在 老式 Firefox 中 的 效果 很 简单 ， 只 要 找到 你 需要 的 浏览 器 版 本 ， 根 据 操 
作 系 统 型 号 下 载 ， 然 后 查看 网 站 在 浏览 器 中 的 效果 即 可 。 如 果 你 不 是 在 Windows 系统 中 开 
发 ， 但 是 使 用 了 Internet Explorer 虚拟 机 ， 那 么 也 可 以 在 虚拟 机 中 下 载 兼 容 Windows 系统 
的 老式 Firefox 测试 网 站 。 








5.5.3 Safari 和 iOS 系 统 的 Safari 


很 不 幸 ， 测 试 旧版 本 的 Safari 浏览 器 需要 旧版 本 的 Mac OS， 因 为 Safari 使 用 OS X 中 的 
WebKit 框架 泻 染 网 页 。 然 而 ， 测 试 iOS 系统 的 旧版 本 Safari 浏览 器 可 以 用 Xcode 模拟 器 
依次 点 击 Hardware 一 Device 一 Manage Devices 菜单 。 在 Devices 窗口 ， 选 择 目 标 操作 系 
统 ， 创 建 一 个 新 的 模拟 器 。( 图 5-10)。 





关于 iOS 模拟 器 的 更 多 信息 ， 请 见 Simulator User Guide (模拟 器 用 户 指 南 ) (http://apple. 
co/2fgPFNv) 5 





m My Mac Create a new simulator: 
10.9.5 (13F1077) 


SIMULATORS 


iPad 2 
8.2 (120508) Simulator Name: 


iPad Air à “= = 
m] a ADD Device Type: | iPhone 4s | 








iPad Retina iOS Version: | iOS 8.2 aa 
a 8.2 (120508) 





"iPhone 45 
8.2 (120508) 
wes 
8.2 (120508) 
iPhone ss 
8.2 (12D508) 
a... 
8.2 (12D508) 
大 iphone 6 
8.2 (120508) 
8.2 (12D508) 


wa Resizable iPhone 
8.2 (120508) 





Core) (crete 














5-10: 在 iOS 模拟 器 中 新 建 模拟 器 


5.5.4 Chrome 浏览 器 
不 幸 的 是 ，Goosgle 不 提供 旧版 本 的 Chrome 浏览 器 用 于 测试 ， 但 是 每 六 周 会 发 布 一 个 新 版 
本 ， 并 且 每 个 新 版 本 的 采用 率 都 非常 高 。 





EE 
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5.6 测试 最 新 版 本 的 浏览 
如 果 你 对 Chrome, Firefox 或 Safari 的 下 一 个 版 本 感 兴趣 ， 可 以 从 以 下 网 站 及 时 了 解 它们 
前 一 天 晚上 刚 发 布 的 最 新 版 本 : 


e Chrome Canary (https://www.google.com/chrome/browser/canary.html ) 
e Firefox Aurora (https://nightly.mozilla.org ) 
e WebKit Nightly (http://nigthly.webkit.org) 


Microsoft 更 新 Edge 的 频率 没有 这 么 高 ， 但 是 确实 经 常 为 Windows Insider Program (https:// 
insider.windows.com) 成 员 提 供 新 版 浏览 器 的 早期 版 本 。 


5.7 第 三 方 测试 服务 

自己 执行 测试 任务 ， 要 维护 多 个 操作 系统 、 大 量 浏 览 器 和 模拟 器 。 除 了 自己 测试 ， 你 还 可 以 
使 用 第 三 方 提供 的 种 类 丰富 的 测试 服务 。 它 们 能 够 满足 你 测试 网 站 在 任意 浏览 器 或 其 他 配置 
环境 中 的 效果 的 需求 ， 同 时 还 提供 类 似 共 享 测 试 阶段 信息 、 人 工 测 试 多 种 浏览 器 和 截图 等 功 
能 。 下 面 列 出 的 几 种 第 三 方 服务 ， 有 些 可 免费 试用 一 段 时 间或 提供 几 种 级 别 的 免费 服务 : 















































e BrowserStack (https://www.browserstack.com ) 
。 Sauce Labs (https://saucelabs.com) 
。 Browserling (https://www.browserling.com) 


e Litmus (https://litmus.com) 


5.8 用 开发 者 工具 测试 


主流 浏览 器 自 带 开发 者 工具 ， 可 以 帮助 开发 者 打造 更 好 的 网 站 : 每 种 工具 集 提供 多 种 工 
具 ， 每 种 工具 可 用 来 完成 不 同 任务 ,但 是 本 市 只 讨论 与 CSS 测试 相关 的 工具 。 





e Chrome DevTools (https://developer.chrome.com/devtools) 

。 Safari for Developers (https://developer.apple.com/safari/tools/) 

e Firefox Developer Tools (https://developer.mozilla.org/en-US/docs/Tools ) 

。 Microsoft Edge Developer Tools (https://dev.modern.ie/platform/documentation/f12- 
devtools-guide/ ) 


不 断 发 展 的 开发 者 工具 

写作 本 书 时 ， 下 面 列 出 的 开发 者 工具 指南 准确 无 误 ， 但 是 浏览 器 开发 者 工具 
在 不 断 改 进 。 如 有 果 你 发 现 不 可 避免 的 改进 使 得 下 面 这 些 信息 已 经 过 时 ， 请 参 
考 前 面 的 浏览 器 开发 者 工具 集 网 站 ， 了 解 更 多 信息 。 
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5.8.1 模拟 设备 尺寸 

要 测试 网 站 在 多 种 设备 〈 例 如 : 手机 、 平 板 等 ) 上 的 显示 效果 ， 当 然 可 以 购买 大 量 设备 ， 
但 是 昂贵 的 费用 很 快 就 会 今 人 望而却步 。 另 一 种 可 行 的 方法 是 用 浏览 器 开发 者 工具 模拟 设 
备 的 尺寸 。 我 们 可 以 通过 调整 浏览 器 窗口 模拟 设备 尺寸 , 但 是 使 用 预先 设置 好 的 尺寸 会 更 
快捷 。Google Chrome 提供 多 种 预先 定义 好 的 尺寸 ， 使 用 时 可 从 DevTools 的 Device Mode 
(设备 模式 ) 菜单 查找 。 


可 以 通过 以 下 方式 进入 Device Mode 菜单 : 

















。 右键 点 击 网 页 的 任意 位 置 
。 选择 “Inspect Element (查看 元 素 )”， 打 开 Chrome DevTools 
e 点 击 Toggle Device Mode (切换 设备 模式 ) 图 标 (图 5-11) 








ál 


5-11: Chrome 的 Toggle Device Mode 图 标 











在 Device Mode 模式 下 ， 窗 口 顶部 会 出 现 工具 栏 ， 用 以 提供 预先 设置 好 的 设备 尺寸 ， 你 可 
以 根据 需要 进行 设置 (图 5-12)。 














@ eo, G Google Person 1 
é E 3a = 
iph 320 x 568 100%v © 
ALL IMAGES HE | Signin 
民 Gi] | Elements Console Sources Network Timeline Profiles Resources >> i x 
© Y tp Y (Preserve log E Show all messages 

>| 

















5-12; Chrome DevTools 的 设备 模拟 器 
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从 Firefox 的 Tools > Web Developer 菜单 ， 进 入 Responsive Design (响应 式 设 计 ) 模式 ， 
可 在 Firefox 浏览 器 中 模拟 出 不 同 设备 尺寸 (图 5-13)。 

















@ Firefox File Edit View History Bookmarks Window Help 








Se Downloads 3) a 

e000 /Q ma 
J gauk 起 | Add-ons osa | = 
(¢)a https://www.google.com/?gws rd=ssl | a Snes | Q search tt” ryiatr E 






















x 768x1024 -~ ~ab 0A Web Developer > 
Page Info 
Get to Google faster. Switch your default search engine to Googie. 


Toggle Tools 
Inspector 
Web Console 
Debugger 
Style Editor 
Performance 
Network 













Developer Toolbar 

WebIDE 

Browser Console 
v Responsive Design View 

Eyedropper 

Scratchpad 


Page Source 
O g Get More Tools 
< 










Google Search I'm Feeling Lucky 














5-13; Firefox 的 响应 式 设 计 模式 





Safari 浏览 器 也 有 了 响应 式 设计 模式 ， 可 以 模拟 不 同 设备 尺寸 (图 5-14)。 从 Develop 一 
Enter Responsive Design Mode 菜单 项 可 以 进入 该 模式 。 
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master of modern color and seamlessly 
mixing old and new. Check out Fawn's eye- 
popping favorites! 


SHOP NOW 

















B 5-14: Safari 的 响应 式 设计 模式 
如 要 在 Microsoft Edge 浏览 器 模拟 不 同 设备 尺寸 ， 请 参照 以 下 步骤 。 





(1) 按 下 F12， 打 开 开 发 者 工具 。 
(2) 点 击 Emulation (模拟 ) 页 卡 (图 5-15). 
(3) 从 “Resolution (分 辩 率 )” 下 拉 菜 单 选 择 设备 尺寸 。 











Emulation © LESSEE Bl)? 5 x 
































t 9 

Mode Display 

Document mode _| Edge (Default) vo Orientation Landscape Vv 
Browser profile Desktop v Resolution 800 x 480 v 
User agent string [Default Vv 














Geolocation 
Simulate GPS 图 of OOn OOn but no signal 
Latitude 


Longitude 











B 5-15; Internet Explorer 的 F12 开发 者 工具 Emulation 页 卡 
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用 户 代理 仿造 


用 户 代理 是 Web 浏览 器 向 服务 器 发 送 的 ， 用 以 标识 自己 身份 的 字符 串 。 所 有 

主流 浏览 器 提供 的 开发 者 工具 都 支持 修改 用 户 代理 ， 并 且 人 们 往往 认为 修改 

其 效用 等 价 于 模拟 另外 一 种 浏览 器 。 然 而 ,仿造 用 户 代理 只 改变 浏览 
只 别 自己 的 方式 ， 修 改 该 字符 串 无 法 改变 浏览 器 的 泻 染 引擎 。 














5.8.2 ”文档 对 象 模型 (DOM) 和 CSS 样 式 

如 今 的 开发 者 工具 支持 以 交互 式 方式 访问 DOM， 支 持 查 看 元 素 ， 或 通过 增加 、 删 除 、 修 
改 属性 或 样式 的 方式 操纵 元 素 。 从 DOM 中 选中 元 素 ， 可 分 析 元 素 应 用 的 样式 和 属性 的 计 
算 结 果 。 


图 5-16 展示 的 是 为 某 一 网 站 的 <body> 元 素 添加 样式 所 使 用 的 CSS 规则 ， 其 样式 的 来 源 有 
多 种 。 通 过 继承 得 到 的 规则 ， 清 楚 地 标明 了 出 处 及 其 在 源 文件 中 的 行 号 。 伪 元 素 : :before 
和 ::after 的 样式 也 列 了 出 来 。 标 有 删除 线 的 规则 是 指 按照 级 联 方 法 被 其 他 规则 覆盖 的 样 
式 。 不 同 的 浏览 器 在 开发 者 工具 中 添加 或 操纵 样式 的 方式 有 所 不 同 。 














e00 Developer Tools - http://localhost:8000/ P, 
OP MN heter Sowers Timeline Prones, Resources. Andis Console = eo 
- For photo attribution (cat-tribution?) see attribution.txt —> Styles | Computed Event Uisteners 3! DOM Sreakpolins! Properties St 
ea on a element.style { +, % © 
> <head>_</head> } 
> 








































body { styles. min. css:26 
v <header class="nheader-global"> margin: »@; 
Y<nav> ackground-color: Ll#FFF; 
<a href="./index. html" class="site-title"> cotor: #525252; 
Ferguson's Cat Shelter font-size: 14px; 









padding: » 8; 





</a> 
> <ul class="nav-item-group">..</ul> 





styles.min.css:2 







</header> 

> <main class="structure-full-width">..</main> bont-sizing: border-baxs 

> <footer class="global-footer">. -</footer> — 一 a maas 
<script type="text/javascript" "src= https: //ajax.qoogleapis. com/ajax/ | body { user agent stylesheet 








Libs/jquery/1.11. 2/iquei "></script> display: block; 
marginis Spx; 


Libs/iquery/1.11.2/jquery.min. is”: 
<script type="text/javascript” src="./is/site. ijs"></script> 





Inherited from htm! 
styles.min.css:14| 










| Pseudo ::before element _ E 
*:before, *:after { styles.min.css:5| 
box-sizing: border-box; 















Pseudo ::after element 


*:before, *:after { styles.min.css:6 
box-sizing: border-box; 





















5-16: Chrome DevTools Styles (样式 ) 面板 





测试 | 81 


HS 


我 们 还 可 以 查看 元 素 应 用 级 联 样式 后 的 显示 效果 ， 如 图 5-17 所 示 。 对 于 经 过 扩展 得 到 的 样 
式 ， 开 发 者 工具 将 显示 样式 的 源 文件 及 其 行 号 。 











在 DOM 中 查看 元 素 ， 右 击 该 元 素 (Mac OS K 系统 ， 按 下 Ctrl 后 单 击 ) M context 菜单 选 
择 “Inspect Element (查看 元 素 )”。 浏 览 器 的 开发 者 工具 将 自动 启动 ， 在 DOM 查看 器 中 高 
亮 显 示 所 选 元 素 。 在 Chrome, Firefox 和 Edge 浏览 器 中 ，Styles 面板 默认 位 置 在 DOM 查 
看 器 的 一 侧 。 在 Safari 浏览 器 中 ， 你 也 许 需 要 单 击 开发 者 工具 菜单 右上 角 的 Styles 页 卡 以 
使 用 该 工具 。 














eoo = Developer Tools - http://localhost:8000/ 7 ee. 
Q [] |Elements| Network Sources Timeline Profiles Resources Audits Console = ea 
: | Styles | Computed | Event Listeners DOM Breakpoints Properties 











<!-~ For photo attribution (cat-tribution?) see attribution.txt 一 > 


v 


<html> 
> <head>_</head> 
v 


w <header class="header-global"> 

v <nav> 

<a href="./index.html" class="site-title"> 
erguson's Cat Shelter 


</a> 
» <ul class="nav-item-group">..</ul> 
</nav> 





</header> 
> <main class="structure-full-w: 
» <footer class="global-footer": 











J Show inherited properties 
</html> > background-color: O#FFF; 


body - #52: styles.min.css:26 
» display: block; 
>» 


px; 
» padding-bottom: @px; 
ox; 


> padding-top: @px; 
width: 1406px; 





Filter 











B 5-17: Chrome DevTools 计算 样式 页 卡 


` ESYA N s 
5.9 视觉 回归 测试 
视觉 回归 测试 是 一 种 测试 方法 ， 它 通过 比较 作为 基准 的 用 户 界面 图 像 和 开发 过 程 同一 用 户 
界面 的 图 像 ， 来 检测 不 符合 预期 的 改动 (回归!)。 视 觉 回 归 测 试 非常 耗 时 ， 因 为 需要 测试 
的 浏览 器 很 多 ， 一 有 改动 就 进行 这 种 测试 ， 测 试 工作 量 很 大 。 此 外 ， 肉 眼 难 以 确定 元 素 在 
空间 位 置 上 的 变化 。 














虽然 视觉 回归 测试 帮助 作用 很 大 ， 但 是 跟 其 他 任何 一 种 测试 方法 类 似 ， 它 并 不 是 包 治 百 病 
的 灵丹妙药 。 视 觉 回归 测试 是 用 来 识别 已 经 出 现 的 错误 ， 因 此 在 将 CSS 改动 提交 到 生产 环 
境 之 前 ， 进 行 该 类 测试 很 有 必要 。 

















注 1: 视觉 效果 上 的 变动 ， 多 指 负面 。 一 一 译 者 注 
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5.9.1 视觉 回归 测试 技巧 
视觉 回归 测试 有 如 下 技巧 。 








测试 重要 的 点 








类 似 于 单元 测试 ， 在 进行 视觉 回归 测试 时 ， 你 可 能 想 测 试 自己 编写 的 所 有 代码 。 然 而 ， 
测试 的 代码 越 多 ， 你 要 维护 的 就 越 多 ， 而 且 大 量 测 试 不 一 定 就 是 高 质量 的 测试 。 与 其 进 
行 大 量 测 试 ， 不 如 只 测试 真正 需要 测试 的 点 。 例 如 ， 一 旦 基础 样式 定义 好 ， 就 不 大 可 能 
因为 改动 它们 而 引入 错误 ; 但 是 更 为 复杂 、 更 加 脆弱 的 可 用 性 组 件 则 是 需要 重点 测试 的 。 


























保持 测试 的 粒度 
执行 视觉 回归 测试 时 将 整个 网 页 截图 可 一 次 性 测试 多 个 组 件 ， 但 是 你 应 该 避免 这 样 做 。 


同时 测试 大 量 组 件 ， 难 以 决定 引起 回归 的 真正 原因 ， 因 为 有 很 多 不 同 的 事情 在 发 生 。 因 




















此 ， 测 试 要 保持 足够 细致 的 粒度 ， 每 次 只 测 单个 组 件 。 如 果 产 生 了 回归 现象 ， 那 么 寻找 
起 因 也 更 加 容易 。 


使 用 多 种 浏览 器 
用 多 种 浏览 器 进行 视觉 回归 测试 极其 重要 ， 因 为 不 同 浏览 器 之 间 可 能 存在 不 一 致 现象 。 
也 就 是 说 ， 不 要 尝试 比较 不 同 浏 览 器 的 截图 ， 因 为 该 做 法 效率 不 高 。 如 果 一 种 浏览 器 演 
染 文本 的 方式 与 男 一 种 浏览 器 存在 细微 差异 ， 很 可 能 不 算是 什么 大 问题 ， 除 非 它 确实 破 
坏 了 页 面 展 示 效 果 。 这 还 表明 ， 如 果 你 需要 测试 Internet Explorer 或 Safari 的 不 同 版 本 ， 
你 可 能 需要 准备 多 种 测试 环境 ， 方法 本 章 前 面 已 经 讲 过 。 

5.9.2 用 Gemini 执 行 视觉 回归 测试 

Gemini (https://github.com/gemini-testing/gemini) 项 目 是 Yandex 团队 (https:/www.yandex.com) 


开发 的 视觉 回归 测试 工具 。 使 用 该 工具 ， 你 可 以 编写 脚本 ， 自 动 截取 网 站 在 主流 浏览 嚣 中 的 
截图 ， 然 后 将 其 与 基准 图 像 比较 ， 不 同 之 处 将 以 高 亮 形式 标记 出 来 。 












































RITR T É 








i 的 示例 来 学 习 如 何 用 Gemini 测试 由 WebKit 4e |S eH. RITE 





好 让 Gemini 用 无 头 浏 览 器 PhantomJS (http://phantomjs.org) 访问 网 页 。 无 头 浏览 器 是 指 没有 
用 户 界面 ， 为 其 他 程序 提供 内 容 的 Web 浏览 器 。 它 不 仅 能 够 在 不 展示 网 页 的 情况 下 泻 染 页 
面 、 截 图 ， 还 常用 来 为 开发 人 员 提 供与 浏览 器 交互 的 接口 ， 使 其 能 够 向 浏览 器 传递 指令 。 








安装 Gemini 

安装 Gemini 之 前 ， 要 先 安装 Node.js 和 NPM。 你 可 以 从 https://nodejs.org 下 
4% Node.js, Gemini 安装 指南 请 见 https://github.com/gemini-testing/gemini。 下 
面 示例 需要 安装 PhantomJS。 你 可 以 从 http://phantomjs.org 下 载 适 合 自 己 操 


(EARN PhantomJS 二 进 制 安装 包 。 


Gemini 通过 利用 Selenium 或 Sauce Labs 和 BrowserStack 之 类 的 云端 服务 ， 
还 可 以 测试 其 他 浏览 器 。 详 细 方 法 请 参考 相关 文档 。 
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1. 配置 
安装 Gemini 之 后 ， 你 需要 在 自己 项 目的 根 目录 中 创建 名 为 .gemini.js 的 文件 。 该 示例 非常 
简单 ， 按 照例 5-1 配置 即 可 。 完 整 的 配置 项 ， 请 见 https://github.com/gemini-testing/gemini。 











例 5-1 Gemini 配置 文件 
module.exports = { 
rootUrl: 'http://127.0.0.1:8000', 
browsers: { 
phantomjs: { 
desiredCapabilities: { 
browserName: 'phantomjs' 
} 
} 
} 
}; 


上 述 代码 告诉 Gemini， 网 站 的 根 目 录 地 址 为 http://127.0.0.1:8000。 设 定好 根 目录 地 址 后 ， 
正如 下 一 节 要 讲 到 的 ， 我 们 编写 测试 代码 指定 URL 时 ， 可 使 用 相对 于 根 目录 地 址 的 相对 
路 径 。 上 述 代码 还 告诉 Gemini， 我 们 将 使 用 PhantomJS 浏览 器 截取 图 像 ， 并 将 其 保存 到 名 
为 phantomjs 的 文件 夹 中 。 若 用 多 个 浏览 器 进行 测试 ， 将 有 助 于 区 分 屏幕 截图 来 自 哪 个 浏 


yo AL 


Va Be o 











2. 测试 

接 下 来 ， 你 需要 编写 测试 文件 。Gemini 有 自己 的 一 套 函 数 ， 这 些 函 数 能 够 完成 打开 URL, 
选择 特定 元 素 、 操 纵 窗 口 和 截图 等 操作 。 如 要 深入 了 解 这 些 功能 ， 请 阅读 其 文档 。 该 例 
中 ， 我 们 将 使 用 例 5-2 所 示 的 代码 。 





























例 5-2 Gemini 测试 代码 文件 
gemini.suite('animals', function(suite) { 
suite.setUrl('/') 
.setCaptureElements('.animal') 
.capture('plain' ) 
})3 
上 述 代 码 相当 直接 。 首 先 ， 声 明 一 个 测试 任务 ， 并 为 其 起 一 个 名 字 (该 例 使 用 “animals” )。 
然后 ， 定 义 一 个 要 执行 的 函数 ， 函 数 体 为 测试 步 又。 用 setUrl 函数 指定 网 站 的 首页 (/) 为 
要 打开 的 页 面 。 接 着 ， 用 .setCaptureElements 函数 选择 要 测试 的 元 素 。 最 后 ， 用 .capture 
函数 截图 。 


3. 采集 基准 图 像 
测试 之 前 ， 我 们 需要 采集 基准 图 像 ，Gemini 将 对 比 新 截取 的 图 像 和 基准 图 像 之 间 的 差别 。 
要 采集 基准 图 像 ， 需 要 在 终端 运行 PhantomJS 和 Gemini, 
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打开 一 个 终端 窗口 ， 输 入 命令 phantomjs--webdriver=4444, 2:2 --webdriver=4444 将 在 端口 
4444 以 WebDriver 模式 运行 PhantomJS。Gemini 使 用 该 端口 与 浏览 器 进行 交互 。 


接着 ， 另 起 一 个 终端 窗口 ， 进 入 到 .gemini.js 文件 所 在 目录 ， 执 行 命令 gemini update 
tests/gemini/animal-tests.js, EA HE A(R (animal-tests.js 为 我 们 刚才 编写 的 测试 文 
件 ， 它 位 于 tests/gemini 目 孙 下 )。 采 集 完 基准 图 像 ， 将 其 存储 于 新 目录 gemini/screens/ 
animals/plain 下 的 phantomjs.png 文件 中 。 该 全 只 采集 一 个 基准 图 像 文件 ， 如 图 5-18 所 示 。 























Sophie 





Age: 4 Gender: Female 


Sophie is a high strung domestic short hair. 
She'd love to have a big yard to run around in! 











图 5-18: 基准 图 像 


4. 测 试 回归 

采集 到 基准 图 像 之 后 ， 就 可 以 测试 回归 情况 了 。 因 为 要 测试 的 代码 是 一 段 正确 无 误 的 新 代 
码 ， 所 以 为 了 讲解 测试 方法 ， 我 们 将 对 代码 做 简单 的 改动 。 改 动 了 我 们 要 测试 的 CSS 组 
件 的 代码 后 ， 用 命令 gemini test --reporter html tests/gemini/animal-tests.js 运行 
Gemini。 该 命令 要 求 Gemini 运行 测试 ， 比 较 前 后 两 次 的 截图 ， 输 出 对 比 结果 为 HTML 页 
面 ， 该 页 面 存储 在 gemini-report/index.html 中 。 打 开 该 文件 ， 将 看 到 测试 结果 (A 5-19), 
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@ © D | [ Gemini report x 本 Person 1 


cja “ale 


Total Tests: 1 Passed:0 Failed: 1 ”Skipped: 0 ”Retries: 0 


Expand all || Collapse all || Expand errors | Show skipped || Expand retries || Show only dift 
y animals 
y plain 
y phantomjs 


Background: | 
> Meta-info 
Expected 
Sophie 





24 Gender: Female 
Age: 4 Gender: Female a 
Sophie ls a high strung domestic short hair. 0 le 
Sophie is a high strung domestic short hair. She'd love to have a Dig yard to run around int and 
She'd love to have a big yard to run around int oe a mm i 

















图 5-19: Gemini 报告 

Gemini 生成 的 报告 ， 既 是 对 测试 结果 的 总 结 ， 也 展示 了 测试 时 使 用 的 截图 。 由 图 5-19 可 
见 ， 两 幅 图 的 差别 非常 大 ， 但 是 通过 分 析 基 准 图 像 和 现 有 图 像 ， 我 们 可 以 发 现实 际 上 是 字 
体 方面 的 问题 ， 引 起 了 组 件 尺寸 的 变化 。 











Gemini 的 替代 方案 
除了 Gemini， 还 有 多 种 视觉 回归 测试 工具 ， 其 中 最 常用 的 两 个 是 Wraith 和 
PhantomCSS。 这 两 个 测试 工具 的 设计 理念 非常 类 似 ， 它 们 能 打开 网 站 ， 能 用 
PhantomJS (基于 WebKit 的 无 头 浏览 器 ) 或 SlimerJS (基于 Gecko 的 无 头 浏 览 器 ) A 
图 ， 能 对 比 网 页 现 有 元 素 的 截图 跟 元 素 基 准 图 像 之 间 的 差异 。 
Wraith (http://bbc-news.github.io/wraith/index.html) 是 由 BBC 开发 的 。 它 依赖 于 CasperJS、 
PhantomJS 或 SlimerJS, ImageMagick 和 Ruby, 
PhantomCSS (https://github.com/Huddle/PhantomCSS) 由 Huddle (http://huddle.com) 公 
司 的 James Cryer 带领 开发 团队 编写 。 它 依赖 于 CasperJS 和 Resemble.JS， 可 以 结合 
PhantomJS 或 SlimerJS 使 用 。 














5.10 维护 你 的 代码 


代码 的 测试 跟 编写 同等 重要 。 不 断 维 护 已 有 代码 ， 提 高 其 














质量 ， 甚 重要 性 不 亚 于 编写 新 代 




















码 。 正 如 我 们 在 下 面 几 节 将 要 学 习 到 的 ， 遵 循 代 码 标准 和 应 用 模式 库 可 以 保证 代码 的 质量 。 











5.10.1 编码 规范 


at 





码 规范 是 指 将 良好 的 代码 编写 方法 记录 下 来 形成 指南 ， 以 鼓励 








团队 所 有 成 员 以 相同 的 方 


式 编 写 代 码 。 编 码 规范 应 该 由 集体 创作 而 成 ， 并 定期 审阅 和 更 新 。 随 着 技术 的 发 展 ， 编 码 
规范 有 助 于 团队 跟踪 最 新 的 技术 ， 代 码 评 审 在 这 方面 所 起 的 作用 尤为 明显 。CSS 编码 规范 





















































格式 、 命 名 和 选择 器 用 法 方面 的 规范 ， 甚 详 略 程度 可 根据 实际 情况 自行 








通常 指定 了 注释 、 

调整 。 

下 面 我 们 来 看 例 5-3 编码 规范 示例 。 你 和 你 的 团队 可 以 以 此 为 出 发 点 ， 来 讨论 在 自己 的 项 
目 中 应 该 如 何 编 








个 成 员 都 应 该 能 够 很 方便 地 参考 它们 。 


例 5-3 ”编码 规范 示例 


(1) 注释 





A. 应 该 在 每 个 文件 的 开头 添加 注释 ， 说 明文 件 的 内 容 。 





[** 





* 该 文件 包含 选项 卡 组 的 样式 。 
* 选项 卡 组 应 仅 包 含 拥有 tab 类 的 元 素 。 


*/ 








B. 易于 混 消 的 属性 ， 应 用 注释 予以 说 明 。 








.tab-group-fLush { 
display: block; 
margin-left: -12px; /* 清除 父 容器 的 padding 值 */ 
margin-right: -12px; /* 清除 父 容器 的 padding 值 */ 


} 
(2) 格式 


A. 规则 集 应 该 满足 下 列 要 求 。 


一 有 多 个 属性 时 ， 每 个 属性 占 











二 行 
一 规则 集 声明 块 中 的 每 条 声明 缩 进 4 个 空格 


/* 错误 


*/ 


.SeLector { 
property1: value; 
property2: value; 


} 


写 CSS。 你 们 可 以 以 适合 自己 的 方式 编写 和 存储 编码 规范 ， 但 是 团队 的 每 





测试 | 87 


/* 错误 */ 

.Selector { 
property1: value; 
property2: value; 


} 
/* 错误 */ 


.Selector { property1: value; property2: value; } 


/* 正确 */ 

.SeLector { 
property1: value; 
property2: value; 


} 
B. 声明 语句 应 该 满足 下 列 要 求 。 


一 冒号 后 面 加 1 个 空格 
必须 以 分 号 结尾 











/* 错误 */ 
.Selector { 
property1:value; 


} 
/* 错误 */ 


.SeLector { 
property1: value 


} 
/* 错误 */ 


.SeLector { 
property1 : value; 


} 
/* 正确 */ 


-selector { 
property1: value; 


} 
C. background-position 各 个 属性 值 不 同时 ， 可 以 将 两 个 属性 值 放 在 一 行 。 





/* 错误 */ 

.Selector1 { property1: value; property2: value; } 
.SeLector2 { property1: value; property2: value; } 
.selector3 { property1: value; property2: value; } 


/* 正确 */ 

.selector1 { background-position: 0 0; } 
.selector2 { background-position: © -10px; } 
.selector3 { background-position: 0 -10px; } 





D. 规则 集 和 声明 末尾 的 空格 必须 删除 。 





(3) 选择 器 命名 规范 


A. 





只 允许 使 用 小 写字 母 。 


/* 错误 */ 
.SeleCtor {} 
.SELECTOR {} 


/* 正确 */ 


.selector {} 


. AGS MAN LEE BaD OF 

















/* 错误 */ 
.selectorWithMultipleWords {} 
.SELECTORWITHMULTIPLEWORDS {} 
.selector_with_multiple_words {} 
.selectorWith_multiple-words {} 


/* 正确 */ 


.selector-with-multiple-words {} 

















. 禁止 用 也 为 元 素 添加 样式 ， 应 该 使 用 类 。 


/* 错误 */ 
#element-to-style {} 


/* 正确 */ 
.element-to-style {} 

















/** 














jJavaScript 修 改 样式 (不 管用 什么 框架 ) ， 都 必须 


连 字符 连接 单词) 。 


























* 错误 : 在 JavaScript 中 ， 操 作 元 素 的 样式 属性 修改 了 元 素 的 样式 。 


i 


$('.js-menu-item').on('click', function (e) { 
$(this).css('background-color', '#FFFFOO'); 


Hs 


[** 


* 正确 : 用 JavaScript 为 元 素 添加 类 ， 修 改元 素 的 样式 。 





*/ 





$('.js-menu-item').on('click', function (e) { 


$(this).addClass('highlighted'); 
})3 














. 用 作 JavaScript 选 择 器 的 类 和 ID ， 必 须 添加 js- 前 


/** 


BR 
级 ， 





并 严禁 在 样式 表 





* 错误 : 带 有 js- 前 级 的 样式 严禁 在 样式 表 中 使 用 。 





| 
#js-element-only-used-by-javascript { 
background-color: #FFFF00; 
} 





PEH 





通过 增加 或 删除 CSs 类 来 完成 。 





测试 


[** 

* 错误 : 在 JavaScript 中 ， 用 为 元 素 添加 样式 的 类 选择 元 素 。 

*/ 

$('.menu-item').on('click', function () { 
$(this).addClass('highlighted'); 























H); 
[** 
* 正确 : 在 JavaScript 中 ， 用 专门 用 作 JavaScript 选 择 器 的 类 选择 元 素 。 
*/ 


$('.js-menu-item').on('click', function () { 
$(this).addClass('highlighted'); 
})3 











F. 必须 使 用 有 意义 的 类 名 。 








/* 错误 : 类 的 命名 无 意义 。 */ 
:| 














/* 正确 : 类 的 命名 有 意义 且 描 述 清楚 。 */ 


.resident {} 


C. 类 名 必须 描述 为 什么 元 素 添加 样式 ， 而 不 是 怎样 添加 样式 。 














/* 错误 : 类 的 命名 描述 的 是 添加 的 样式 。 */ 
.float-left-bold {} 























/* 正确 : 类 的 命名 描述 的 是 为 什么 元 素 添 加 样式 。 */ 


.sidebar -important {} 











(4) 属性 


A. 属性 的 简写 形式 只 可 用 于 border、margin 和 padding。 























/* 错误 : font 属 性 使 用 了 简写 形式 。 */ 
.SeLector { 

border: 1px solid #000000; 

font: 12px Arial, sans-serif; 





} 
/* 正确 : 仅 border 属 性 使 用 了 简写 形式 。 */ 


.SeLector { 
border: 1px solid #000000; 
font-family: Arial, sans-serif; 
font-size: 12px; 




















} 
B. 属性 必须 按照 字母 顺序 排列 。 





/* 错误 */ 
.SeLector { 
padding: 12px; 





| ee 
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margin: 24px; 


border: 1px solid #000000; 


} 
/* 正确 */ 


.SeLector { 


border: 1px solid #000000; 


margin: 24px; 
padding: 12px; 
} 


C. 属性 值 为 9 时， 必须 省 略 单位 。 





/* 错误 */ 

.selector { 
padding: Opx; 
margin: Opx; 


border: 1px solid #000000; 


} 
/* 正确 */ 


.selector { 


border: 1px solid #000000; 


margin: 0; 
padding: 0; 





更 多 编码 规范 方面 的 启示 ， 请 见 下 


He 





Alix HERE 











e Google CSS 编码 规范 (http://bit.ly/2e68N3y ) 
e WordPress CSS 编码 规范 (http://bit.ly/2fgLrp2 ) 
。 18F 前 端 指 南 (https://pages.18f.gov/frontend/#css ) 





5.10.2 ”模式 库 











模式 库 (有 时 也 称 样式 指南 ) 是 网 站 使 用 的 一 组 用 户 界面 模式 ， 它 展示 了 每 种 模式 相关 的 


重要 信息 ， 其 中 包括 以 下 几 点 : 


。 何 时 (不 ) 使 用 模式 的 指导 
。 解释 模式 使 用 方式 的 示例 代码 





。 使 用 某 一 模式 而 不 用 另 一 模式 的 原因 





图 5-20 是 Yelp (https://www.yelp.com/styleguide) 所 使 用 的 模式 库 。 
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€ > C | wwwyelp.com/styleguide 





Foundation 
General typography 


Yelp's typography pattem is called yType. Its foundation lies 
in traditional typographical measures. 


Header Level 1 :var 
pacing units of 6 between different comp 


nents. 
and predictable vertical rhythm, and Header Level 2 249x/s09x 
extends to our horizontal grid as well. 


yType utilizes a 6px baseline grid. All pages are designed 
cit nts. This 


Header Level 3 16px/21px 
To enable yType on a page, add the following line to the ae 
template: This is a paragraph. Morbi tristique senectus et netus et malesuada fames ac turpis 
egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
#attr $additional_body classes = ['ytype'] This is a link. 14px/ 18px 


Grid 
Yelp is built on a vertical 12-column grid. Column widths are defined as a percentage of their parent and gutters are fixed at 30px, which respects the 
6px spacing pattern. 


Color palette 
Yelp's primary palette contains red, blue, and warm greys. 


When designing for Yelp, you are not limited to these colors, 
but they should be prominent in any consumer facing 
design. 


$yelpy-red #¢41200 














5-20: Yelp 模式 库 


1. 优点 

模式 库 有 如 下 几 个 优点 。 首 先 ， 模 式 库 将 网 站 所 有 组 件 汇集 到 一 起 。 参 与 项 目的 所 有 成 员 
都 能 了 解 到 搭建 网 站 的 各 个 模块 ， 确 保 他 们 熟悉 其 背后 的 原理 。 让 每 个 人 都 熟悉 一 组 可 复 
用 的 模式 ， 还 能 加 快 开 发 速度 ， 因 为 开发 新 项 目 时 ， 无 需 从 头 重新 开发 这 些 构 建 模块 。 


模式 库 将 所 有 组 件 汇集 到 一 起 ， 还 有 助 于 保证 用 户 界面 的 一 致 性 。 使 用 模式 库 对 设计 团队 
也 能 起 到 帮助 作用 ， 因 为 需要 修改 组 件 的 样式 时 ， 在 现 有 模式 的 基础 上 做 修改 即 可 。 模 式 
库 为 设计 工作 提供 约束 条 件 ， 鼓 励 设 计 师 在 现 有 模式 的 基础 上 设计 新 的 元 素 ， 这 进一步 强 
化 了 用 户 界面 应 该 保持 一 致 的 设计 理念 。 


最 后 ， 模 式 库 将 网 站 的 所 有 组 件 都 汇集 到 一 起 ， 使 识别 不 一 致 的 组 件 变 得 更 加 容易 。 编 写 
的 新 代码 可 能 影响 到 用 户 界面 效果 ， 在 提交 代码 之 前 ， 借 助 模式 库 ， 可 从 视觉 上 快速 识别 
错误 。 修 改 模式 后 ， 若 网 页 看 起 来 有 问题 ， 有 了 模式 库 ， 诊 断 问 题 将 更 加 容易 ， 因 为 模式 
库 是 模式 的 最 简单 应 用 形式 。 

2. 建设 模式 库 

模式 库 不 需要 建成 艺术 品 库 ， 它 只 需要 展示 每 种 模式 及 其 相关 信息 。 模 式 的 繁 简 视 需要 而 
定 。 模 式 库 应 放 到 团队 成 员 都 能 访问 到 的 公共 位 置 ， 以 便 大 家 经 常 参考 。 












































模式 库 应 该 是 团队 成 员 共 同 努 力 的 结果 ， 因 为 大 家 都 参与 进来 ， 可 以 鼓励 更 多 的 人 熟悉 网 





站 所 用 的 视觉 设计 模式 。 实 现 模 式 库 的 过 程 ， 也 是 为 团队 成 员 提 供 对 话 的 机 会 
就 用 户 界面 到 实现 的 一 切 内 容 发 表意 见 ， 由 此 还 可 获得 大 量 新 的 认识 。 如 果 你 们 还 不 没有 模 
式 库 ， 应 该 先 建设 一 个 记录 当前 用 户 界面 情况 的 模式 库 ， 然 后 再 在 此 基础 上 迭代 。 





， 大 家 可 以 


模式 库 发 扬 了 样式 应 该 有 不 同 的 用 途 这 一 理念 ， 它 很 好 地 展示 了 如 何 像 组 合 构建 模块 一 
ee 理想 情况 下 ， 模 式 库 中 的 每 种 模式 ， 线 上 什么 地 方 用 


到 了 ， 要 给 


MailChimp 的 模式 库 (https:Wux.mailchimp.com/patterns) (图 5-21) 在 上 述 


非常 出 色 。 











其 中 一 处 参考 位 置 ， 此 外 还 要 记 下 每 种 模式 的 使 用 场景 以 及 什么 
宜 使 用 ， es ae 模式 库 还 





情况 下 不 


下 是 开始 执行 视觉 回归 测试 的 好 地 方 。 


各 个 方面 都 做 得 








9 OA | navigation | MailChimp x 





Grid System 


Typography 


Form Elements 


Navigation 


Tables 


Lists 


Slats 


Stats/Data 





€ > C |D ux.mailchimp.com/patterns/navigation 





Local Navigation 


Example 


Account settings ~ My profile Billing v 


ass="mobile-top-nav nomargin full-width 


">Navigation</a> 
‘ocal-nav selfclear"> 


ass="hover-list"> 


i> 
<a href="#">Account settings</a> 
<ul> 

<li> 


account details</a> 
</li> 
<li> 
<a href="/account/contact">Contac 
t information</a> 
</li> 
<li> 
<a href="/account/domains">Verifi 
ed domains</a> 
</li> 
<li> 
<a href="/account/export">Export 


Extras ~ 


Rewards ~ 


Notes 

Local navigation is used to jump between pages that 
categorically fall under the same (main) section. The local nav 
shown in the example above is from the Account section and 
it is present on all pages under /account. 


If there are secondary pages in a section then links to those 
pages are shown inside hover-list menus. A blue-colored 
link indicates the page/sub-section currently in view. 


The local nav spans the full width of the page up to 640px at 
which point it collapses into a stacked menu. 











图 5-21: 


更 多 资源 


关于 模式 库 的 更 多 资源 ， 请 见 





MailChimp 的 模式 库 


章 、 图 书 和 播客 。 


http://styleguides.io， 该 网 站 提供 相关 示例 、 文 





测试 


5.11 总 结 


这 一 章 我 们 学 习 了 CSS 测试 的 相关 内 容 。 首 先 ， 本 章 探讨 了 为 什么 在 改动 CSS 后 对 其 测 
试 既 费 时 、 难 度 又 大 ， 这 是 因为 有 很 多 浏览 器 和 平台 需要 测试 。 然 后 ， 本 章 介 绍 了 各 种 新 
旧 浏 览 器 、 模 拟 器 、 虚 拟 机 和 第 三 方 平 台 提 供 的 测试 服务 的 获取 方式 。 接 着 ， 本 章 又 讨论 
了 建设 编码 规范 和 模式 库 的 优点 ， 介 绍 了 如 何 用 Gemini 工具 执行 视觉 回归 测试 。 熟 练 掌 
握 这 些 工 具 ，CSS 测试 将 更 易于 操作 。 












































第 6 章 


代码 的 组 织 和 重 构 来 略 





前 儿童 我 们 学 习 了 大 量 CSS 的 相关 知识 ， 包 括 级 联 方法 的 工作 原理 ， 样 式 的 不 同 用途 ， 编 
写 更 优质 的 CSS 以 及 提高 测试 效率 的 方法 。 本 章 将 首先 讨论 样式 的 组 织 方式 ， 然 后 探索 如 
何 利用 我 们 所 学 的 一 切 知识 更 好 地 重 构 CSS， 最 后 再 探索 如 何 评价 代码 重 构 是 否 成 功 。 


6.1 按照 样式 从 最 不 精确 到 最 精确 组 织 CSS 


我 们 从 第 2 章 学 习 到 ，CSS 样式 根据 选择 器 的 特 指 度 和 样式 的 顺序 产生 作用 。 因 此 ， 有 必 
要 按照 样式 产生 作用 的 顺序 组 织 CSS 代码 。 

















(1) 通用 样式 

(2) 基础 样式 

(3) 组 件 及 其 容器 的 样式 

(4) 结构 化 样式 

(5) 功能 性 样式 

(6) 浏览 器 特定 样式 (如果 一 定 需要 ) 


按照 以 上 顺序 添加 CSS， 随 着 声明 块 选择 器 的 精确 度 提 高 ， 更 为 复杂 的 选择 器 将 与 已 经 添 
加 的 更 加 宽泛 的 选择 器 区 分 开 来 。 























下 面 我 们 来 复习 不 同类 型 样式 的 用 途 。 阅 读 这些 样 式 的 用 途 时 ， 请 留意 后 者 是 如 何在 前 者 
的 基础 上 进行 定义 的 。 
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6.1.1 通用 样式 
第 4 章 讲 过 ,通用 样式 用 来 设 定 基准 ， 以 消除 不 同 浏览 器 之 间 的 不 一 臻 性。 消除 了 不 一 臻 
性 之 后 ， 再 定义 样式 时 就 可 以 使 用 通用 样式 定义 的 属性 了 。 


6.1.2 ”基础 样式 
基础 样式 为 网 站 的 所 有 元 素 提 供 基本 的 样式 。 留 白 (margin, padding 和 line-height 等 )、 字 
体 及 其 大 小 等 大 多 数 元 素 都 要 用 到 的 样式 ， 不 需要 不 断 重 写 ， 应 该 在 基础 样式 中 进行 定义 。 


6.1.3 组 件 及 其 容器 的 样式 

组 件 样 式 是 以 基础 样式 为 基础 进行 定义 的 ， 它 利用 视觉 隐喻 ， 使 得 用 户 更 易于 与 网 站 交 
互 。 前 面 已 讲 过 ， 该 类 样式 应 该 能 够 满足 网 站 范围 内 的 大 多 数 应 用 场景 ， 样 式 上 的 任何 调 
整 都 应 该 交 由 父 容器 处 理 。 






























































6.1.4 结构 化 样式 
结构 化 样式 包括 组 件 及 其 容器 的 样式 。 该 类 样式 用 来 创建 网 页 的 布局 ， 并 常用 于 定义 
Rot. 


6.1.5 功能 性 样式 
功能 性 样式 是 所 有 样式 中 最 精确 的 样式 。JavaScript 所 使 用 的 添加 !important 语句 的 类 就 
属于 这 类 样式 ， 其 他 为 满足 单一 目的 而 实现 的 样式 也 属于 该 类 。 











6.1.6 浏览 器 特定 样式 

最 后 ， 如 果 你 无 法 放弃 支持 老式 浏览 器 ， 那 么 你 专门 为 其 实现 的 样式 属于 该 类 。 该 类 样式 
可 能 也 使 用 了 !important 语句 ， 只 对 特定 的 浏览 器 生效 。 它 们 通常 不 够 优雅 ， 因 此 不 再 使 
用 时 ， 一 定 要 将 其 删除 。 








媒体 查询 要 靠近 相关 声明 块 


媒体 查询 用 于 根据 条 件 为 元 素 应 用 不 同 的 样式 ， 比 如 根据 浏览 器 视 口 的 宽度 
变化 调整 样式 。 应 该 将 媒体 查询 写 到 它们 所 作用 的 声明 块 附 近 ， 而 不 是 将 其 
置 于 CSS 文件 的 末尾 或 单独 的 文件 中 ， 因 为 这 样 做 可 以 为 样式 是 如 何 起 作用 
的 提供 更 多 背景 信息 。 























6.2 ”多 个 文件 还 是 一 个 大 文件 


代码 的 组 织 方式 有 两 种 ， 即 将 代码 置 于 多 个 文件 或 只 用 一 个 大 文件 。 代 码 放置 位 置 要 易于 
开发 人 员 查 找 ， 这 一 点 很 重要 ， 并 且 同 样 非常 重要 的 是 ， 这 样 做 有 助 于 网 站 快速 加 载 以 满 
足 终端 用 户 的 需要 。 我 们 首先 一 起 看 看 将 CSS 传 给 浏览 器 时 会 发 生 什 么 ， 然 后 再 一 起 讨论 
是 用 一 个 还 是 多 个 CSS 文件 。 

















6.2.1 提供 CSS 

用 户 访问 包含 CSS 文件 (与 之 相对 的 是 使 用 行内 CSS) 的 网 站 时 ， 浏 览 器 首先 要 请 求 CSS 
文件 ， 然 后 将 其 下 载 下 来 ， 再 解析 它们 并 应 用 恰当 的 样式 。 因 此 ， 我 们 需要 尽 可 能 地 使 需 
要 下 载 的 CSS 文件 缩小 ， 以 便 提 高 加 载 速度 。 

拼接 指 的 是 将 多 个 文件 合并 为 一 个 文件 的 过 程 。 拼 接 技术 很 常用 ， 它 通过 减少 需要 下 载 的 
文件 数量 ， 降 低 页 面 加 载 时 间 。 如 果 例 6-1 和 例 6-2 的 两 个 文件 按照 现 有 顺序 进行 拼接 ， 
将 得 到 例 6-3 所 示 的 结果 。 















































例 6-1 headings.css 文件 








[** 
* 该 文件 包含 基本 的 标题 元 素 的 样式 。 
af 
h1 { 


color: #333; 
font-size: 24px; 
Margin-bottom: 6px; 
margin-left: 12px; 
margin-right: 6px; 
margin-top: 12px; 


} 


例 6-2 lists.css 文件 

kk 

* 该 文件 包含 列表 元 素 的 样式 。 

* 

ul { 
list-style-type: none; 
padding-bottom: 12px; 
padding-left: 0; 
padding-top: 12px; 
padding-right: 0; 








} 
例 6-3 拼接 后 得 到 的 CSS 文件 


/** 
* 该 文件 包含 基本 的 标题 元 素 的 样式 。 
*/ 
h1 { 
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color: #333; 
font-size: 24px; 
margin-bottom: 6px; 
margin-left: 12px; 
margin-right: 6px; 
margin-top: 12px; 

} 

kk 

* 该 文件 包含 列表 元 素 的 样式 。 

* 

/ 

ul { 
list-style-type: none; 
padding-bottom: 12px; 
padding-left: 0; 
padding-top: 12px; 
padding-right: 0; 

} 


拼接 操作 功能 强大 ， 有 了 该 方法 ， 我 们 可 以 将 大 的 CSS 文件 拆 分 为 更 小 的 文件 〈 小 文件 可 
再 重组 为 一 个 大 文件 ， 通 过 减少 文件 数量 ， 终 端 用 户 不 再 需要 下 载 多 个 文件 ， 从 而 减少 了 
页 面 加 载 时 间 )。 如 采用 多 个 文件 ， 相 似 的 规则 集 则 可 以 按照 符合 逻辑 的 方式 组 织 到 一 起 ， 
因此 更 易于 定位 代码 。 此 外 ， 使 用 多 个 文件 进行 开发 ， 更 易于 理解 单个 CSS 文件 的 内 容 ， 
而 将 所 有 CSS 代码 堆积 到 一 个 大 文件 中 ， 则 会 增加 理解 代码 的 难度 。 





TT 



































与 CSS 拼接 相对 应 的 一 个 概念 是 压缩 。 压 缩 是 指 从 CSS 文件 中 删除 所 有 不 必要 的 空格 、 
注释 和 换行 ， 而 不 改变 代码 行为 的 过 程 。 例 如 ， 对 例 6-1 和 例 6-2 的 代码 进行 拼接 和 压缩 
操作 ， 将 得 到 例 6-4 所 示 的 代码 。 


例 6-4 压缩 后 的 CSS 文件 
hi{color:#333;font-size:24px;margin-bottom:6px;margin-left:12px;margin-right:6px; 
margin-top:12px}ul{list-style-type:none;padding-bottom:12px;padding-left:0; 
padding-top:12px;padding-right:0} 

















压缩 后 的 CSS 通常 只 占 一 行 ， 上 述 示例 中 的 代码 折 行 ， 是 出 于 本 书 排版 
的 需要 。 





请 注意 例 6-4 中 ， 所 有 的 空格 和 注释 均 已 删除 。 空 格 和 注释 增加 了 用 户 需 要 下 载 的 CSS 文 
件 的 大 小 ， 删 除 文件 中 不 必要 的 内 容 后 ， 文 件 随 之 变 小 。 你 不 要 尝试 按照 压缩 后 得 到 的 形 
式 编写 代码 ， 因 为 出 现 错误 难以 查找 ， 并 且 压 缩 形 式 的 代码 难以 维护 。 











网 上 有 很 多 拼接 和 压缩 CSS 的 工具 。 当 你 准备 做 这 一 步 时 ， 请 调研 多 种 实现 方式 ， 使 用 符合 
自己 需要 的 工具 。 也 许 你 只 需要 使 用 简单 的 在 线 服务 ， 把 自己 编写 的 CSS 上 传 到 他 们 的 网 站 ， 
网 站 再 将 压缩 过 后 的 CSS 输出 ， 也 许 你 需要 的 是 更 复杂 的 工具 ， 需 要 将 其 整合 到 开发 过 程 中 。 
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6.2.2 ”用 单一 的 CSS 文 件 进 行 开 发 

小 型 项 目 用 一 个 CSS 文件 完全 可 以 接受 ， 操 作 起 来 也 很 简单 。 按 照 级 联 样式 的 工作 原理 安 
HE CSS 样式 ， 合 理 地 将 CSS 文件 内 容 划 分 为 几 个 大 块 ， 每 个 大 块 下 再 恰当 安排 小 块 内 容 ， 
并 合理 添加 注释 : 






























































* 基础 样式 


i EMEA, 标题 */ 
































ies 
+ 
ANS ADS ADS ANS ANS 
fo 
= 
Een 
E Re Sk Re RE 
六 
Ea 
> 
IMI HIHI + HI 
* 
~ 





/* 结构 化 样式 : 结算 区 域 的 布局 */* 

/* 结构 化 样式 ， 侧 边栏 的 布局 */ 

/* 结构 化 样式 : 主 区 域 的 布局 */ 

i. aoe 个 人 设置 区 域 的 布局 */ 


KK 




















随 着 项 目的 成 长 ， 只 用 一 个 CSS 文件 ， 代 码 维护 难度 可 能 逐渐 增 大 ， 当 大 到 难以 维护 时 ， 
显然 需要 将 其 拆 分 为 多 个 文件 。 

















注 1: 原文 为 “/* Structural Styles: Checkout Layout */” 一 一 译 者 注 
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6.2.3 用 多 个 CSS 文 件 进行 开发 

开发 网 站 时 使 用 多 个 CSS 文件 ， 各 个 文件 所 包含 的 样式 可 以 分 别 服 务 于 网 站 的 某 一 部 分 功 

能 ， 从 而 可 以 避免 将 CSS 添加 到 不 恰当 的 位 置 。 开 发 时 使 用 多 个 CSS 文件 ， 你 的 项 目 也 

许 看 起 来 像 下 面 这 样 : 
|-css/ 


| -normalizing-styles 
| |- normalize.css 











-base-styles 

|- forms.css 
|- headings.css 
|- images.css 
|- lists.css 
|- tables.css 
|- etc. 


-component-styles 
|- alerts.css 
|- buttons.css 
|- carousel.css 
|- dropdowns.css 
|- modals.css 
| - etc. 


- structural-styles 

|- Layout-checkout.css 
Layout-sidebar.css 
Layout-primary.css 
Layout-settings.css 
etc. 


- utility-styles 
|- utility.css 


- browser-specific-styles 
|-ie8.css 


| 
如 果 有 这 么 多 CSS 文件 ， 那 么 你 不 应 该 将 其 都 添加 到 HTML 文件 中 ， 因 为 请 求 的 数量 多 了 ， 
将 增加 页 面 的 加 载 时 间 。 编 写 自动 化 任务 ， 将 其 拼接 为 一 个 CSS 文件 ， 开 发 起 来 会 更 容易 。 


6.3 重 构 前 审查 CSS 
从 以 下 更 高 的 角度 来 审查 CSS， 将 非常 有 助 于 重 构 : 


。 所 用 到 的 属性 列表 

。 使 用 某 一 特定 属性 的 声明 块 列 表 
。 使 用 的 颜色 数量 
。 使 用 的 最 高 和 最 低 特 指 度 

。 拥有 最 高 和 最 低 特 指 度 的 选择 器 
。 选择 器 的 长 度 
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CSS Dig 是 Google Chrome 浏览 器 的 一 款 免费 插件 ， 你 可 以 用 它 获 取 到 以 上 信息 。 用 
Chrome 浏览 器 访问 http://cssdig.com 安装 该 插件 。 安 装 完成 后 ， 其 图 标 (图 6-1) 将 显示 
在 已 安装 的 浏览 器 插件 旁边 。 























图 6-1: CSS Dig 插件 图 标 


CSS Dig 的 使 用 方法 是 访问 目标 网 站 ， 点 击 CSS Dig 图 标 ， 然 后 弹出 一 个 模 态 窗口 ， 甚 中 
显示 的 是 可 以 分 析 的 CSS 源 文件 和 无 法 分 析 的 文件 (图 6-2)。 








DIGGABLE 
加 /static/css/chairish.e9786d40dbfd.css 


UNDIGGABLE 


//fonts.googleapis.com/css?fam ... rd+TT:400,400italic|Fjalla+One 
//fonts.googleapis.com/css?family=Nothing+You+Could+Do 


START DIGGING 


图 6-2: CSS Dig 模 态 窗口 











点 击 模 态 窗口 的 “START DIGGING” 按 钮 ，CSS Dig 开始 分 析 CSS。 这 时 将 出 现 另 一 个 含有 
两 个 页 卡 (Properties 和 Selectors) 的 模 态 窗口 ， 它 列 出 了 这 两 个 主题 的 详细 信息 (图 6-3)。 








PROPERTIES SELECTORS 





nt-weight: 490; 











S 6-3: CSS Dig 属性 页 卡 
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从 下 面 几 节 的 学 习 中 ， 你 将 发 现 CSS Dig 是 一 个 非常 有 价值 的 工具 ， 能 够 帮 你 调整 好 CSS 
代码 。 


6.4 重 构 策略 


ASPET CSS 的 重 构 策 略 。 但 是 要 注意 ， 条 件 允 许 的 话 ， 应 该 只 对 你 能 够 维护 的 小 块 代 
码 进行 重 构 ， 并 做 到 经 常 评审 和 发 布 。 如 果 一 次 重 构 和 发 布 大量 代 码 ， 引 入 错误 的 风险 更 
大 ， 因 为 改动 的 内 容 更 多 。 重 构 大 量 代码 还 会 延缓 新 功能 的 编码 ， 如 果 处 理 不 当 ， 在 源 文 
件 版 本 控制 系统 合并 代码 也 将 更 加 复杂 ， 甚 至 将 引入 错误 。 如 果 对 小 块 代码 进行 重 构 ， 可 
能 引发 错误 问题 的 改动 将 会 更 少 ， 代 码 测 试 更 加 容易 。 
























































在 第 3 章 中 我 们 学 习 了 编写 优秀 CSS 代码 的 多 种 技巧 ， 但 是 在 已 经 编写 了 大 量 代码 的 项 
目 中 却 难以 实现 它们 。 我 们 的 终极 目标 是 运用 这 些 理念 ， 构 建 由 通用 样式 、 基 础 样式 、 组 
件 、 结 构 化 样式 和 功能 性 样式 组 成 的 CSS 代码 库 。 接 下 来 介绍 的 这 些 策略 能 够 帮 你 实现 每 
种 理念 ， 这 样 做 可 以 鼓励 从 能 够 尽快 部 署 的 小 改动 开始 重 构 。 


6.4.1 保持 规则 集结 构 的 一 致 性 

保持 规则 集结 构 的 一 致 性 可 以 使 开发 更 容易 。 请 确定 好 声明 块 的 格式 和 声明 语句 的 顺序 。 
每 条 声明 语句 可 以 各 占 一 行 ， 并 尽 可 能 按照 字母 顺序 排列 。 按 照 上 述 方式 修改 现 有 的 CSS 
或 编写 新 的 CSS， 可 以 保证 规则 集 的 一 致 性 ， 从 而 降低 风险 。 
























































6.4.2 ”删除 僵尸 代码 

CSS 代码 库 不 能 留 有 僵尸 代码 ， 这 一 点 真 的 很 重要 。 便 尸 代码 是 指 存在 但 没有 使 用 的 代 
码 。CSS 中 的 僵尸 代码 具体 表现 为 以 下 几 种 形式 ， 没 有 使 用 的 声明 块 、 重 复 的 声明 块 和 声 
明 语句 。 


没有 使 用 的 声明 块 是 指 存在 但 从 没有 使 用 过 的 声明 块 ， 和 常 由 开发 人 员 的 玻 忽 导致 ， 如果 编 
写 代码 时 思路 不 清晰 或 随 着 时 间 的 推进 发 生 了 很 多 变化 ， 那 么 难以 跟踪 所 用 样式 。 

重复 的 声明 块 是 指 没 有 必要 的 声明 块 ， 因 为 它们 跟 现 有 声明 块 雷同 ( 例 6-5)。 重 复 的 声明 
块 通常 因 复制 和 粘贴 代码 导致 。 
































例 6-5 重复 的 声明 块 
h1 { 
font-size: 28px; 
font-weight: 900; 
} 


/* 重复 的 声明 */ 
hi { 





font-size: 28px; 
font-weight: 900; 
} 


类 似 的 ， 重 复 的 声明 语句 〈 例 6-6) 是 指 与 同一 声明 块 中 的 其 他 语句 重复 的 声明 语句 。 不 
同 的 规则 集中 声明 语句 重复 的 现象 很 常见 ， 因 为 级 联 方法 会 指定 样式 起 作用 的 顺序 (虽然 
应 尽 可 能 将 这 些 样 式 写 到 一 起 ) 。 然 而 ， 我 们 应 该 避免 同一 规则 集中 存在 重复 的 声明 语句 ， 
因为 最 后 出 现 的 声明 语句 将 起 作用 ， 而 前 面 的 则 是 多 余 的 。 


例 6-6 存在 重复 声明 语句 的 声明 块 
hi { 
font-size: 28px; 
font-weight: 900; 
font-weight: 900; /* 重复 的 声明 */ 
} 






































.section-title { 
font-size: 24px; 


/* 该 声明 并 不 算 重 复 ， 
bah 








W 





为 它 位 于 另 一 声明 块 之 中 ， 且 作用 于 不 同 的 选择 器 。 

















font-weight: 900; 
} 








僵尸 代码 非常 有 害 ， 它 增加 了 代码 库 的 混乱 程度 ， 使 其 难以 维护 。 修 改 代码 时 ， 你 需要 非常 
小 心 ， 不 能 破坏 现 有 样式 。 如 果 存 在 大 量 僵尸 代码 ， 你 不 得 不 将 大 量 时 间 浪 费 在 对 它们 的 理 
解 上 。 除 此 之 外 ，CSS 代码 需要 从 服务 器 发 送 到 终端 用 户 的 浏览 器 ， 若 CSS 文件 中 包含 大 
量 僵尸 代码 ， 下 载 时 间 将 会 延长 ， 从 而 对 用 户 体验 带 来 破坏 作用 〈 尤 其 是 网 络 连接 较 慢 时 )。 


























6.4.3 分离 CGSS 和 JavaScript 

为 元 素 添 加 样式 的 类 和 ID 不 应 该 在 JavaScript 中 用 作 选 择 器 ， 因 为 混用 会 增加 更 改 它们 
的 难度 。CSS 和 JavaScript 应 该 尽早 分 离 ， 因 为 类 和 了 本 很 可 能 会 调整 ， 这 可 能 会 破坏 
JavaScript 代码 。 




















分 离 CSS 和 JavaScript 很 容易 ， 搜 索 JavaScript 代码 ， 找 到 选取 元 素 的 位 置 ， 然 后 在 选择 
器 前 面 添加 js-， 同 时 将 该 选择 器 添加 到 HTML 代码 中 定义 该 元 素 的 位 置 。 





如 果 你 使 用 某 一 JavaScript 框架 ， 请 查阅 该 框架 的 文档 找到 元 素 的 选取 方式 ， 然 后 在 
JavaScript 代码 中 搜索 选取 元 素 的 位 置 。 如 果 你 没有 用 框架 ， 搜 索 document.getElement 
字符 串 应 该 能 够 找到 选取 元 素 的 语句 ， 为 原生 JavaScript 代码 使 用 document. 
getELementById 或 document .getELementsByCLassName 选取 元 素 。 在 HTML 中 查找 元 素 很 简 
单 ， 搜 索 之 前 在 JavaScript 中 使 用 的 类 名 或 ID 即 可 。 
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6.4.4 “分 离 基 础 样式 
任何 网 站 的 基础 样式 都 应 该 尽 可 能 的 简单 ， 因 为 它们 使 用 的 是 类 型 选择 器 。 用 CSS Dig 插 
件 分 析 网 站 样式 后 ，Selectors 面板 (图 6-4) 给 出 了 某 一 选择 器 的 多 种 使 用 信息 。 

















PROPERTIES SELECTORS Sees SER sae ae aa 
ORS: 34¢ 


1 TY LENGTH + 


hidden 


template 





button 











6-4: CSS Dig 的 Selectors 面板 


将 基础 样式 分 为 以 下 不 同类 别 : 





。 标题 (<h1> - <h6>) 

e 文本 (例如: <p>、<fig> 和 <code>) 

。 超 链接 (<a>) 

。 列表 (<dL>、<oL> 和 <ul>) 

。 表单 (例如 : <form>, <legend>, <fieldset>, <input> 和 <button>) 
。 表格 (例如 : <table>, <thead>, <tbody>, <tfoot>, <tr> 和 <td>) 
。 媒体 ( 


分 完 类 之 后 ， 你 可 以 用 CSS Dig 寻找 某 一 特定 类 别 的 选择 器 。 找 到 选择 器 的 使 用 频率 和 使 用 位 
置 之 后 ， 你 可 以 对 它们 进行 比较 ， 看 看 哪个 属性 更 常用 。 如 果 一 个 类 型 选择 器 单独 使 用 ， 且 只 
用 过 一 次 ， 就 可 以 放心 将 其 删除 。 然 而 ， 如 果 一 个 类 型 选择 器 用 过 多 次 ， 请 按 以 下 步骤 重 构 。 
(1) 对 于 样式 要 予以 重 构 的 类 型 选择 器 ， 在 基础 样式 中 新 建 一 条 规则 集 。 


(2) 从 所 有 用 到 该 类 型 选择 器 的 地 方 找到 最 常用 的 属性 ， 将 其 添加 到 新 规则 集中 。 
(3) 从 其 他 规则 集 删除 重复 的 属性 ， 因 为 它们 可 以 继承 新 定义 的 基础 样式 。 


例如 :; <audio>, <object> 和 <video>) 






































举 个 例子 ， 假 定 我 们 用 CSS Dig 发 现 <h1> 标签 有 多 处 定义 ， 如 例 6-7 所 示 ， 我 们 就 可 以 对 


其 重 构 。 


例 6-7 <hi> 标签 应 用 的 多 种 样式 
/* 文件 : styles.css */ 


hi { 
color: #000000; 
font-family: Helvetica, sans-serif; 
font-size: 32px; 
line-height: 1.2; 
} 


body > div > hi { 
color: #000000; 
font-size: 32px; 
margin-bottom: 12px; 


} 


.Section-condensed h1 { 
color: #000000; 
font-size: 16px; 


} 


.order-form h4 { 
font-family: Helvetica, sans-serif; 
color: #333333; 
text-decoration: underline; 


} 
第 1 步 ， 新 建 一 个 规则 集 。 


/* 文件 : headings.css */ 








hi { 
} 
第 2 步 ， 将 最 常用 的 样式 复制 到 新 规则 集中 。 


/* 文件 : headings.css */ 





hi { 
color: #000000; 
font-family: Helvetica, sans-serif; 
font-size: 32px; 
line-height: 1.2; 
} 


第 3 步 ， 从 规则 集 删除 能 够 从 基础 样式 继承 的 重复 样式 。 


/* 文件 : styles.css */ 
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body > div > h41 { 
margin-bottom: 12px; 


} 


.section-condensed h1 { 
font-size: 16px; 


} 


.order-form hi { 
color: #333333; 
text-decoration: underline; 


} 























如 果 进 行 如 上 改动 之 后 页 面 样式 出 现 问题 ， 请 用 你 最 喜欢 的 浏览 器 开发 者 工具 查看 元 素 ， 

















然后 核查 CSS 面板 的 样式 以 确定 问题 样式 的 源头 。 如 果 该 问题 难 





以 修复 ， 则 可 以 使 用 精 








确 程 度 更 高 的 选择 器 添加 临时 样式 来 解决 这 个 问题 。 但 是 要 记得 在 后 面 添 加 一 条 注释 ， 说 














明 该 处 样式 是 临时 样式 以 及 为 什么 添加 。 继 续 重 构 的 过 程 中 ， 你 ; 
临时 样式 。 





秆 最 终 能 够 删除 所 有 这 些 

















最 后 ， 详 细 检查 未 纳入 基础 样式 的 样式 ， 确 认 甚 是 否 偏离 它们 应 该 发 挥 的 作用 。 如 果 是 的 








话 ， 那 么 就 可 以 将 其 删除 。 


6.4.5 删除 元 余 的 ID 


CSS 文件 中 特 指 度 最 高 的 选择 器 使 用 ID。 对 拥有 多 个 ID 的 选择 器 进行 重 构 时 ， 首 先 可 以 
将 最 右 侧 ID 左边 的 一 切 统统 删除 。 因 为 同一 个 ID 在 一 个 网 页 最 多 只 能 使 用 一 次 ， 一 个 选 





择 器 包含 多 个 ID 实 属 见 余 。 例 如 ， 例 6-9 中 选择 器 选择 的 元 素 与 








例 6-8 中 相同 ,但 是 它 的 


特 指 度 却 比 较 低 。 如 果 降 低 某 一 元 素 的 特 指 度 ， 其 样式 被 更 精确 的 选择 器 的 样式 覆盖 ， 那 
么 我 们 将 无 法 降低 该 元 素 的 特 指 度 。 遇 到 这 种 情况 ， 重 构 时 应 该 首先 降低 更 精确 的 选择 器 





的 特 指 度 。 
例 6-8 选择 器 存在 见 余 ID 


#main-header > div > div > ul#main-menu { 
border-bottom: 1px solid #000000; 
} 


例 6-9 从 选择 器 删除 元 余 ID 


#main-menu { 
border-bottom: 1px solid #000000; 
} 


6.4.6 将 ID 转化 为 类 





删除 元 余 ID 之 后 ， 剩 余 的 ID 可 以 转化 为 类 。 该 过 程 虽然 要 花费 一 定时 间 ， 但 是 最 终 得 到 
的 CSS 特 指 度 更 低 、 更 易于 复 用 。 将 ID 改 为 类 时 ， 请 记得 使 用 意义 明确 的 类 名 ， 切 记 不 








See FANE Mt Ts A PR 


将 ID 转化 为 类 后 ， 你 也 许 会 发 现 由 于 特 指 度 降低 ， 一 些 元 素 的 样式 与 预期 不 符 。 可 能 的 
修复 方式 是 ， 找 到 具备 较 高 特 指 度 的 选择 器 ， 降 低 它们 的 特 指 度 ， 因 为 它们 覆盖 了 其 他 特 
指 度 较 低 的 选择 器 的 样式 。 然 而 ， 如 果 解 决 某 一 特定 问题 需要 改动 大 量 的 选择 器 ， 那 么 你 
最 好 不 要 将 ID 转化 为 类 ， 而 是 等 将 更 精确 样式 选择 器 的 特 指 度 降 低 之 后 ， 再 来 重 构 这 部 
分 代码 。 

















6.4.7 ”区 分 功能 性 样式 

功能 性 样式 是 唯一 应 该 使 用 !important 声明 的 样式 。 在 你 的 CSS 中 搜索 !important， 希 
望 只 能 找到 几 处 。 若 不 得 不 使 用 !important 的 样式 ， 且 用 途 单一 〈 如 隐藏 元 素 ) ， 应 将 其 
作为 功能 样式 写 到 样式 表 的 同一 地 方 。 本 章 前 面 我 们 讲 过 ， 在 拼接 CSS 时 功能 样式 应 该 置 
于 CSS 文件 的 底部 ， 因 此 整合 CSS 文件 时 ， 一 定 要 恰当 安排 功能 性 样式 的 位 置 。 
































对 于 非 功能 性 样式 而 使 用 !important 声明 的 ， 你 应 该 用 自己 最 喜欢 的 浏览 器 的 开发 者 工具 
进行 分 析 ， 弄 清楚 为 什么 使 用 该 声明 。 如 果 经 过 分 析 ， 你 认为 不 需要 使 用 !important， 可 
以 安全 地 将 其 删除 。 然 而 ， 如 果 !important 用 于 覆盖 继承 来 的 样式 ， 可 暂时 予以 保留 ， 堵 
以 注释 的 形式 说 明 使 用 该 声明 的 原因 。 以 后 对 起 覆盖 作用 的 !important 声明 进行 重 构 时 ， 
再 重新 审查 该 样式 并 进行 重 构 ， 然 后 就 可 以 安全 地 将 其 删除 了 。 





FY 





























6.4.8 定义 可 复 用 组 件 

E CSS 时 ， 定 义 可 复 用 组 件 是 最 令 人 旦 惧 的 任务 之 一 ， 因 为 我 们 通常 会 担心 无 法 一 次 成 
功 。 然 而 ， 这 种 担心 是 多 余 的 ， 因 为 如 果 你 无 法 保证 第 1 次 重 构 时 就 做 到 100% 正确 ， 那 
么 以 后 也 可 以 再 次 研究 该 组 件 并 将 其 改 好 。 


你 可 以 从 经 常 重复 使 用 的 界面 模式 〈 例 如 : 选项 卡 ) 着 手 ， 花 点 时 间 调研 网 站 什么 地 方 用 
到 了 该 模式 。 请 记录 该 模式 的 各 种 变 体 ， 并 判断 它们 是 合乎 规范 的 ， 还 是 由 于 不 一 致 的 
CSS 而 导致 的 。 你 可 以 按照 第 4 章 中 “组 件 样式 ”一 节 的 指南 构建 可 复 用 组 件 ， 然 后 用 新 
的 组 件 代码 替换 之 前 所 有 用 到 该 模式 的 地 方 。 


定义 可 复 用 组 件 有 助 于 删除 重复 的 CSS。 删 除 多 余 的 ID 后 ,通常 余下 的 那个 ID 用 于 为 元 
素 添 加 样式 。 可 以 用 作 可 复 用 组 件 的 界面 模式 ， 第 1 次 实现 时 因为 是 从 头 开始 编码 ， 不 存 
在 代码 重复 问题 ， 但 是 当 定义 相似 却 略 为 不 同 的 模式 时 ， 势 必需 要 从 第 1 次 实现 该 组 件 的 
地 方 复 制 代码 ， 并 进行 修改 以 满足 新 的 、 略 为 不 同 的 界面 模式 的 需求 ， 那 么 代码 重复 问题 
就 会 出 现 。 使 用 相同 的 组 件 样式 可 以 防止 出 现 该 问题 ， 但 是 若 要 重新 定义 组 件 的 样式 ， 则 
要 把 样式 添加 到 容器 组 上 或 使 用 结构 化 样式 。 
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6.4.9 删除 行内 CSS 和 过 于 模块 化 的 类 
删除 行内 CSS 和 过 于 模块 化 的 类 应 该 同时 进行 ， 因 为 它们 在 本 质 上 是 相同 的 ， 只 不 过 用 
style 属性 添加 的 行内 CSS 其 特 指 度 更 高 ， 除 非 用 !important 声明 覆盖 了 行内 样式 。 这 两 





个 方面 都 应 该 晚 些 重 构 。 








如 果 按 照 本 章 所 讲 的 重 构 顺序 进行 重 构 ， 那 么 到 目前 为 止 你 : 
。 正在 朝 保持 CSS 在 结构 上 的 一 致 性 而 努力 








。 有 更 少 的 僵尸 代码 
。 分 离 了 CSS 和 JavaScript 
。 建立 了 基础 样式 


。 通过 删除 多 余 的 ID FI ID 转化 为 类 ， 降 低 了 特 指 度 最 高 的 选择 器 
。 将 功能 性 样式 单独 放 在 一 起 ,减少 了 important 声明 的 使 用 





。 定义 了 可 复 用 组 件 




















完成 以 上 重 构 ， 你 可 以 迁移 行内 样式 了 一 一 如 果 代 码 中 还 有 残留 的 ! 如 果 在 这 之 前 删除 行 
内 样式 ， 你 可 能 需要 将 其 放 到 样式 表 最 后 临时 添加 的 类 之 中 ， 同 时 为 了 保持 它们 的 特 指 
度 ， 你 很 可 能 要 使 用 !important 声明 。 如 果 等 到 重 构 完 其 他 项 后 再 迁移 行内 CSS， 你 只 需 




















要 搜索 HTML 文件 找到 行内 样式 ， 














如 果 不 再 需要 它们 ， 可 直接 将 其 删除 或 根据 需要 将 其 移 





植 到 样式 表 的 合适 位 置 。 再 次 提醒 ， 有 悖 于 基础 样式 和 组 件 样式 的 行内 样式 ， 应 予以 仔细 
调查 ， 以 确定 其 是 否 是 因为 不 一 致 的 设计 或 编码 而 添加 的 。 如 果 确 实 如 此 ， 可 以 将 行内 样 
式 安 全 删除 。 如 采样 式 上 的 变异 是 必要 的 ， 则 可 以 尝试 通过 为 容器 添加 样式 来 达到 修改 元 











素 样式 的 目的 。 














6.4.10 ”隔离 面向 特定 浏览 器 的 CSS 样 式 





5 ng 


DE aie ZA EE ee, RHEA T RRA ERA, RISE CSS 中 使 用 一 些 特定 的 “ 黑 








[rel 


技术 ”， 而 这 些 代 码 很 容易 污染 其 他 CSS， 因 此 我 们 需要 对 其 进行 区 分 。 但 是 在 隔离 之 前 ， 


请 记得 查看 网 站 的 流量 来 源 ， 以 \ 关 








I 断 是 否 能 够 放弃 支持 这 些 浏 览 囊 。 删 除 浏览 器 特定 样式 


比 起 重 构 代 码 为 其 找到 合适 的 位 置 更 易于 操作 ， 结 果 也 更 令 人 满意 。 如 果 无 法 放弃 对 一 球 
浏览 器 的 支持 ， 那 么 你 只 需要 使 用 第 4 音 所 讲 的 条 件 注释 专门 针对 该 浏览 器 为 某 一 元 素 添 





加 样式 即 可 。 








6.5 评估 重 构 是 否 成 功 











我 们 学 习 了 以 上 重 构 技 巧 之 后 ， 到 








E 解 如 何 评定 重 构 的 成 功 与 否 非 常 重要 ， 以 便 为 重 构 定 下 





实际 可 以 操作 的 目标 。 下 面 是 重 构 完 成 之 后 如 何 评 价 是 否 成 功 的 一 些 想法 。 其 中 一 些 建 





议 ， 比 如 检查 文件 的 大 小 ， 在 重 构 之 前 也 应 要 做 ,以 便 与 重 构 之 后 进行 比较 。 





6.5.1 (RMH AA TAS 

判断 代码 重 构 之 后 成 功 与 否 的 首要 的 、 最 明显 的 方式 是 确认 网 站 的 行为 是 否 倒退 。 再 次 提 
醒 ， 重 构 是 指 在 不 改变 代码 行为 的 前 提 下 ， 重 写 代码 使 其 更 加 简洁 。 在 第 5 章 中 ， 我 们 讨 
论 了 手动 测试 网 站 在 多 个 浏览 器 的 表现 ， 以 及 通过 比较 截图 的 方式 进行 了 视觉 回归 测试 。 
如 果 经 过 彻底 的 视觉 效果 检测 之 后 没有 发 现 视 觉 效 果 方 面 的 问题 ， 那 么 接 下 来 你 需要 考虑 
其 他 方面 。 


1. RAEE 

高 质量 的 CSS 是 指 CSS 与 使 用 它 的 HTML 结构 分 离开 来 。 按 照 第 4 章 所 讲 的 技巧 ， 通 过 
创建 可 复 用 组 件 和 用 容器 包 囊 组件， 你 可 以 实现 CSS 和 HTML 的 分 离 。 虽 然 一 定 程 度 的 
耦合 度 一 直 存 在 ， 但 是 还 是 要 避免 使 用 过 于 复杂 的 选择 器 。CSS Dig 这 类 工具 能 够 帮 你 嗅 
探 出 复杂 和 过 于 精确 的 选择 器 ， 你 需要 将 其 改 成 更 为 宽泛 的 。 审 计 你 的 网 站 并 检查 你 的 选 
择 器 以 找 出 哪些 改进 是 必要 的 。 


2. 低 特 指 度 

第 2 章 讲 过 CSS 特 指 度 和 规则 集 顺 序 决定 着 元 素 所 应 用 的 样式 。 我 们 在 第 4 章 也 学 习 了 降 
低 整体 CSS 特 指 度 的 策略 。 选 择 器 的 特 指 度 指标 可 用 于 度量 代码 库 的 特 指 度 ， 以 判断 代码 
库 是 否 包含 大 量 高 特 指 度 的 选择 器 ， 这 些 选 择 器 将 增加 代码 的 维护 成 本 。CSS Dig 这 类 工 
具 可 以 按照 选择 器 的 特 指 度 为 其 排序 。 


3. 更 少 的 文件 数量 和 更 小 的 文件 

本 章 前 面 讲 解 了 应 该 向 终端 用 户 提供 拼接 和 压缩 过 的 CSS 文件 一 一 拼接 可 以 减少 需要 下 
载 的 文件 数量 ， 压 缩 可 以 删除 多 余 字 符 以 减 小 文件 体积 。 这 两 种 处 理 方法 都 能 提高 下 载 速 
度 ， 进 而 减少 页 面 加 载 时 间 。 如 要 衡量 这 一 指标 ， 你 可 以 分 别 统 计 并 比较 重 构 前 后 所 有 文 
件 的 大 小 。 






































































































































6.5.2 Ul bug 数 

一 旦 你 开始 重 构 CSS 并 遵循 编码 标准 ， 因 代码 凌乱 或 代码 重复 而 引入 的 UI bug 数量 应 该 
会 减少 。 第 5 章 讲 过 实现 UI 模式 库 和 用 截图 监控 视觉 效果 的 变化 ， 能 较 好 地 保证 用 户 界 
面 是 我 们 用 经 过 全 面 测试 的 代码 构建 的 ， 其 视觉 效果 一 直 处 于 我 们 的 监控 之 中 。 软 件 bug 
是 不 可 避免 的 〈 网 站 开发 人 员 可 能 引入 bug， 浏 览 器 厂商 可 能 引入 浏览 器 问题 ) ， 但 是 使 用 
模式 库 和 执行 视觉 效果 测试 百 试 不 爽 ， 它 们 能 够 帮 你 更 快 地 检测 和 诊断 这 些 问 题 。 





















































6.5.3 ”减少 开发 和 测试 时 间 

你 将 CSS 以 符合 逻辑 的 方式 分 成 多 个 文件 ， 确 立 了 编码 标准 ， 并 创建 了 用 户 界 面 模式 库 之 
后 ， 应 该 能 够 较 以 往 更 快 地 构建 和 维护 用 户 界面 了 。 该 项 指标 因 网 站 而 异 ， 因 为 有 些 用 户 
界面 比 起 其 他 的 更 为 复杂 ， 开 发 时 间 相 应 更 长 。 但 对 于 大 多 数 情况 ， 你 还 是 能 够 判断 重 构 
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是 否 隆 低 了 开发 时 间 ， 提 高 了 工作 流 的 效率 。 





除了 降低 开发 时 间 ， 如 果 你 能 熟练 使 用 正确 的 工具 ， 你 也 许 还 注意 到 你 可 以 更 快 地 测试 界 
面 。 再 次 提醒 ， 第 5 章 所 讲 的 各 种 测试 方法 应 该 能 够 提升 你 测试 界面 的 速度 和 自信 心 。 
































6.6 ”总结 

本 章 讨论 了 CSS 的 组 织 方式 、 代 码 的 重 构 策略 和 衡量 重 构 成 功 与 否 的 各 项 指标 。 切 记 这 些 
策略 要 经 常 应 用 而 不 是 只 用 一 次 ， 以 便 我 们 能 以 更 小 和 更 可 控 的 模块 发 布 这 些 改动 。 当 你 
开始 实现 本 章 介绍 的 策略 时 ， 你 已 经 开始 构建 遵循 优秀 架构 所 有 原则 的 CSS 代码 库 了 。 
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normalize.css 


/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 


[** 

* 1. 修改 在 所 有 浏览 器 中 的 默认 字体 〈 自 定义 ) 。 

2. 纠正 在 所 有 浏览 器 中 的 行 高 。 

3. 在 Windows Phone 和 iOS 设 备 调整 屏幕 方向 后 ， 防 止 字体 大 小 发 生 改 变 。 


html { 
font-family: sans-serif; /* 1 */ 
line-height: 1.15; /* 2 */ 
-ms-text-size-adjust: 100%; /* 3 */ 
-webkit-text-size-adjust: 100%; /* 3 */ 











} 

/* 各 分 区 
================================================================== */ 
[** 

* 清除 在 所 有 浏览 器 中 的 margin ( 自 定义 ) 。 

e 
body { 

margin: 0; 

} 


* 增加 在 IE 9- 浏 览 器 中 的 正确 显示 方式 。 
*/ 
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article, 

aside, 

footer, 

header, 

nav, 

section { 
display: block; 

} 


/** 

* 纠正 section 和 article 区 块 元 素 中 的 hil 元素 在 Chrome、Firefox 和 Safari 浏 览 器 中 的 font-size 
和 margin。 

*/ 











h1 { 
font-size: 2em; 
margin: 0.67em 0; 


} 
/* 为 内 容 分 组 


/[** 
* 增加 在 IE 9- 浏览 器 中 的 正确 显示 方式 。 
* 1. 增加 在 下 浏览 器 中 的 正确 显示 方式 。 
*/ 











figcaption, 

figure, 

main { /* 1 */ 
display: block; 








} 
kk 
* 增加 在 IE 8 浏览 器 中 的 正确 margin 值 。 
*/ 
figure { 
margin: 1em 40px; 
} 
/** 


* 1 增加 在 Firefox 浏 览 器 中 应 显示 的 盒子 尺寸 。 
* 2. 在 Edge 和 IE 浏 览 器 中 应 用 的 溢出 样式 。 
*/ 





























hr { 
box-sizing: content-box; /* 1 */ 
height: 0; /* 1 */ 
overflow: visible; /* 2 */ 


} 


[** 
* 1. 纠正 在 所 有 浏览 器 中 字体 大 小 的 继承 和 缩放 比例 。 
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* 2. 纠正 所 有 浏览 器 对 以 em 为 单位 表示 字体 大 小 所 产生 的 古怪 效果 
zi 








pre { 
font-family: monospace, monospace; /* 1 */ 
font-size: 1em; /* 2 */ 


} 
/* 文本 层级 的 语义 
.清除 IE 10 浏览 器 为 激活 的 链接 添加 的 灰色 背景 。 


$ 2 清除 在 iOS 8+ 和 Safari 8+ 系 统 中 为 链接 添加 的 下 划 线 之 间 的 间隔 。 
*/ 














a { 
background-color: transparent; /* 1 */ 
-webkit-text-decoration-skip: objects; /* 2 */ 


} 
[** 


* 所 有 浏览 器 
*/ 


7 





a:active, 
a:hover { 
outline-width: 0; 


} 


[** 

* 1. 清除 在 Firefox 39- 浏 览 器 中 的 下 边框 。 
* 2. 增加 在 Chrome、Edge、IE、Opera 和 Safari 浏 览 器 中 正确 的 文本 修饰 。 
*/ 





a 








abbr[title] { 
border-bottom: none; /* 1 */ 
text-decoration: underline; /* 2 */ 
text-decoration: underline dotted; /* 2 */ 


} 


[** 
* 防止 在 Safari 6 浏览 器 
*/ 





E 
W 





下 一 条 样式 规则 而 重复 应 用 border 属 性 





at 








o 


b, 
strong { 
font-weight: inherit; 


} 


[** 
* 增加 在 Chrome、Edge 和 Safari 浏 览 器 中 正确 的 字体 粗细 样式 。 
*/ 








b, 
strong { 


> RED TH UTR ASHER RR ASI, ARERR 〈 自 定义 ) 。 
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font-weight: bolder; 





* 1. 纠正 在 所 有 浏览 器 中 字体 大 小 的 继承 和 缩放 比例 问题 。 
* 2. 纠正 所 有 浏览 器 对 以 em 为 单位 表示 字体 大 小 所 产生 的 古怪 效果 。 


code， 

kbd, 

samp { 
font-family: monospace, monospace; /* 1 */ 
font-size: 1em; /* 2 */ 
































} 

/** 

* 增加 在 Android 4.3- 中 正确 的 字体 样式 。 
wh 

dfn { 
font-style: italic; 

} 

/** 

* 增加 在 IE9- 浏 览 器 中 正确 的 背景 色 和 文本 的 颜色 。 
ty 

mark { 
background-color: #ff0; 
color: #000; 

} 

/** 

* 增加 在 所 有 浏览 器 中 正确 的 字体 大 小 。 
*/ 

small { 
font-size: 80%; 

} 

/** 

* 防止 sub 和 sup 元 素 影响 在 所 有 浏览 器 中 的 行 高 。 
*/ 

sub, 

sup { 


font-size: 75%; 
line-height: 0; 

position: relative; 
vertical-align: baseline; 


} 


sub { 
bottom: -0.25em; 


} 
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sup { 
top: -0@.5em; 
} 


/* RAMANA 


kk 


* 增加 在 IE 9- 浏 览 器 中 的 正确 显示 方式 。 
*/ 











audio, 
video { 

display: inline-block; 
} 


kk 


* 增加 在 iOS 4-7 浏 览 器 中 的 正确 显示 方式 。 
*/ 











audio:not([controls]) { 
display: none; 
height: 0; 

} 


[** 
* 清除 IE 10- 浏 览 器 中 包 于 在 链接 内 部 的 图 像 的 边框 。 








img { 
border-style: none; 


} 


[** 
* 在 下 浏览 器 中 隐藏 溢出 的 部 分 。 
*/ 


svg:not(:root) { 
overflow: hidden; 


[** 

* 1. (SOCCER A N EPAF 〈 自 定义 ) 。 
* 2. iebFirefox#llSafarijil bi gs margin, 

*] 














button, 
input, 
optgroup, 
select, 
textarea { 
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font-family: sans-serif; /* 1 * 
font-size: 100%; /* 1 */ 
line-height: 1.15; /* 1 */ 
margin: 0; /* 2 */ 


* HPN 上 览 器 中 显示 超出 的 部 分 。 
.在 Edge 浏 览 器 中 














p 


button, 
input { /* 1 */ 
overflow: visible; 








} 

[** 

* 在 Edge、Firefox 和 JE 浏览 器 中 ， 清 
* 1. /EFirefoxitll bias, RAA 
党 

button, 


select { /* 1 */ 





/ 


显示 超出 的 部 分 。 


除 对 文本 转换 的 继承 。 
转换 的 继承 。 











的 ) 破坏 原生 的 audio 


text-transform: none; 
} 
[** 
* 1. 在 Android 4 系统 中 ， 防 止 WebKit 的 一 个 bug (下 面 第 2 点 所 描述 自 
和 video 控 件 。 
* 2. 纠正 在 iOS 系 统 和 Safari 浏 览 器 中 无 法 为 可 点 击 类 型 添加 样式 的 问题 
* 
/ 
button, 


html [type="button"], 

[type="reset"], 

[type="submit"] { 
-webkit-appearance: button; /* 


hie eed | 





* 在 Firefox 浏 览 器 中 ， 清 除 内 部 bord 





button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner 
[type="reset"]::-moz-focus-inner, 





2 */ 


er 和 padding。 


j 





[type="submit"]::-moz-focus-inner { 
border-style: none; 
padding: 0; 
} 
kk 
* 根据 前 面 的 规则 ， 将 按钮 聚焦 样式 恢复 为 未 设置 前 的 。 
*/- 
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button: -moz-focusring, 
[type="button"]:-moz-focusring, 
[type="reset"]:-moz-focusring, 
[type="submit"]:-moz-focusring { 
outline: 1px dotted ButtonText; 


} 
[** 


* 修改 在 所 有 浏览 器 中 的 border、margin 和 padding ( 自 定义 ) 。 














fieldset { 
border: 1px solid #c0c0c0; 
margin: 0 2px; 
padding: 0.35em 0.625em 0.75em; 


1. 纠正 在 Edge 和 IE 浏览 器 中 文本 换 和 pa ade 
* 2. 纠正 在 IE 浏 览 器 中 fieldset 元 素 color 属 性 不 能 正确 继承 的 问题 。 
* 3. 清除 padding， 开 发 者 将 fietdset 元 素 在 所 有 浏 览 器 中 的 padding 值 都 清 零 时 ， 不 至 于 





























legend { 
box-sizing: border-box; /* 1 */ 
color: inherit; /* 2 */ 
display: table; /* 1 */ 
max-width: 100%; /* 1 */ 
padding: 0; /* 3 */ 
white-space: normal; /* 1 */ 


} 


[** 

* 1. 增加 在 IE 9- 浏 览 器 中 的 正确 显示 方式 。 

* 2. 增加 Chrome、Firefox 和 Opera 浏 览 器 中 正确 的 垂直 对 齐 方式 。 
*] 











progress { 
display: inline-block; /* 1 */ 
vertical-align: baseline; /* 2 */ 


} 


[** 
* 清除 正 浏 览 器 中 默认 的 垂直 滚动 条 。 
*/ 





textarea { 
overflow: auto; 


} 


[** 
a 增加 IE 10-0 as “PIE WH POR TKH, 
. 在 IE 10-0 Fas Pin kpadding, 





a 
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[type="checkbox"], 

[type="radio"] { 
box-sizing: border-box; /* 1 */ 
padding: 0; /* 2 */ 








} 
[** 
* 纠正 在 Chrome 浏 览 器 中 增加 和 减少 按钮 组 件 的 光标 样式 。 
*/ 


[type="number"]::-webkit-inner-spin-button, 
[type="number"]::-webkit-outer-spin-button { 
height: auto; 


* 1. 纠正 Chrome 和 Safari 浏 览 器 中 的 古怪 样式 。 
* 2. 纠正 在 Safari 中 的 轮廓 样式 。 








[type="search"] { 
-webkit-appearance: textfield; /* 1 */ 
outline-offset: -2px; /* 2 */ 

} 


/** 
* 清除 macOS 系 统 下 Chrome 和 Safari 浏 览 器 的 内 部 padding 和 cancel button (取消 按钮 ) FF 
sy | 


式 。 


TH 





[type="search"]::-webkit-search-cancel-button, 
[type="search"]::-webkit-search-decoration { 
-webkit-appearance: none; 


} 


/** 

* 1. 纠正 无 法 在 iOS 系 统 和 Safari 浏 览 器 中 为 可 点 击 类 型 的 元 素 应 用 样式 的 问题 。 
* 2. 在 Safari 浏 览 器 中 将 font 属 性 值 改 为 inherit。 

*/ 

















::-webkit-file-upload-button { 
-webkit-appearance: button; /* 1 */ 
font: inherit; /* 2 */ 


/* 
* 增加 在 IE 9- 浏 览 器 中 的 正确 显示 方式 。 
* 1. 增加 在 Edge、IE 和 Firefox 浏 览 器 中 的 正确 显示 方式 。 
*/ 











details, /* 1 */ 
menu { 
display: block; 





118 | 附录 


} 


/* 
* 增加 在 所 有 浏览 器 中 的 正确 显示 方式 。 
*/ 








summary { 
display: list-item; 


/[** 
* 增加 在 下 9- 浏 览 器 中 的 正确 显示 方式 。 
*/ 











canvas { 
display: inline-block; 
} 


[** 
* 增加 在 正 浏 览 器 中 的 正确 显示 方式 。 





template { 
display: none; 


/** 
* 增加 在 下 10- 浏 览 器 中 的 正确 显示 方式 。 
*/ 





[hidden] { 
display: none; 


} 
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作者 简介 

Steve Lindstrom 早 在 1999 年 出 于 个 人 爱好 开发 了 自己 的 第 一 个 网 站 ， 那 时 他 还 在 中 学 读 
书 。 后 来 他 赴 佛 罗 里 达州 墨尔本 市 求学 ， 从 佛罗里达 理工 学 院 获 得 了 计算 机 科学 学 士 学 
位 。Steve 曾 在 国防 、 旅 游 科技 领域 从 事 软件 开发 工作 ， 最 近 开 始 涉足 电子 商务 领域 。 工 
MEZA, MEK FD Be Fe] hoe 





封面 说 明 

本 书 封面 上 的 动物 是 非洲 椰子 狸 (Nandinia binotata) ， 也 称 双 班 狸 。 这 是 一 种 跟 黄 筷 狼 和 
猿 非 常 相近 的 小 型 杂食 性 哺乳 动物 ,主要 生活 在 东非 ,但 是 在 非洲 大 陆 中 西部 地 区 也 有 分 
布 。 它 们 喜欢 栖息 在 低地 森林 或 赤道 附近 的 从 林 之 中 。 





非洲 本 子 狸 腿 短 、 尾 巴 长 ， 棕 黑色 的 皮毛 上 夹杂 着 黑 斑 。 这 种 动物 有 几 分 像 家 猫 ， 并 且 比 
起 其 他 灵猫 科 动 物 更 像 一 些 ， 因 此 ， 它 们 是 Nandinia 属 的 唯一 成 员 ， 平 均 体 重 为 3~5 4 
(1 磅 =0.454 千克 ) 。 它 们 是 夜行 性 动物 ， 和 白天 绝 大 部 分 时 间 者 栖息 在 大 树 的 隐秘 处 ， 夜 间 
砚 食 。 虽 然 非 洲 椰 子 狸 的 食物 以 水 果 为 主 ， 但 是 它们 也 捕食 昆虫 、 蜥 蝎 、 乌 类 、 蝙 恕 和 小 
lh Br a 


非洲 椰子 狸 一 年 繁殖 两 次 ， 分 别 在 5 月 和 10 月 (这 两 个 月 份 可 获取 的 食物 通常 更 为 丰 
富 ) 。 幼 患 出 生 以 后 ， 母 兽 的 乳腺 会 分 汰 一 种 橙黄 色 液 体 来 染 黄 自己 的 腹部 和 幼 屿 的 皮毛 。 
母 兽 这 样 做 的 原因 我 们 尚未 完全 弄 清 ， 不 过 它们 可 以 以 此 作为 自己 暂 不 能 交配 的 信号 ， 或 
警告 雄 兽 远离 自己 ， 以 免 伤害 自己 的 孩子 。 


灵猫 香 指 的 是 这 类 动物 的 分 小 物 ， 灵 猫 科 动 物 赁 借 它 划 定 领土 范围 和 寻找 配偶 。 灵 猫 香 经 
稀释 之 后 可 用 作 香 料 ， 人 们 使 用 这 种 香料 已 经 有 成 百 上 千年 的 历史 了 。 虽 然 如 今 很 多 产品 
使 用 人 工会 成 的 灵猫 理 ， 但 是 为 了 获取 灵猫 科 几 种 动物 的 肉 和 气味 腺 ， 有 人 仍 在 非法 捕捉 
它们 。 

O’Reilly 图 书 封面 上 的 很 多 动物 都 是 濒 庆 物种 ， 它 们 对 整个 世界 部 很 重要 。 如 果 你 想 为 保 
护 动物 做 些 贡 献 ， 请 访问 animals.oreilly.com。 





封面 照片 来 自 Lydekker 的 Royal Natural History. 
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回复 “CSS” 查 看 相关 书 单 


微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 |T 好 书 


B 


QQ 连接 


ARR SAI: 218139230 
ARES SARI. 164939616 


图 灵 社区 
iTuring.cn 
在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , 图 灵 访 谈 
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+ Lal + + 
CSS 重 构 : 样式 表 性 能 调 优 
CSS 对 于 现代 网 站 的 用 户 体验 至 关 重 要 ， 其 地 位 不 亚 于 决定 着 网 站 外 形 
的 HTML 和 让 网 站 动 起 来 的 JavaScript。 本 书 作为 CSS 代 码 重 构 指 南 ， 不 仅 
展示 了 如 何 编写 结构 合理 的 CSS， 以 构建 响应 式 、 易 于 使 用 的 网 站 ， 还 
介绍 了 如 何 用 重 构 方法 创建 可 读 性 更 强 和 更 易于 维护 的 CSS 人 代码。 不论 
你 是 刚 开 始 开 发 自己 的 第 一 个 CSS 项 目 或 是 清理 现 有 项 目的 代码 ， 本 书 
提供 的 多 种 宝贵 方法 都 可 以 帮 你 建设 一 个 符合 优秀 建构 设计 原则 的 CSS 
代码 库 。 


E 了 解 什么 是 代码 重 构 及 其 与 C5S 之 间 的 关系 

E 探索 Web 浏 览 器 如 何 使 用 级 联 方法 决定 为 哪个 元 素 应 用 什么 样式 
E 编写 可 预测 、 易 维护 和 可 扩展 的 CS5， 提 升 代 码 复 用 能 力 

E 理 清 不 同类 型 的 CSS 样 式 及 其 使 用 场景 

E 确定 对 哪些 浏览 器 和 设备 进行 测试 ， 以 维护 好 CSS 

学 习 如 何 合 理 组 织 样式 ， 重 构 CSS 和 评估 重 构 效果 


Steve Lindstrom， 经 验 丰 富 的 软件 工程 师 ， 在 中 学 读书 时 就 出 于 个 人 
爱好 开发 了 自己 的 第 一 个 网 站 。 曾 为 国防 、 旅 游 科 技 和 电子 商务 领 
域 开发 过 相关 软件 。 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com, 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

Mis 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


